Web-API-01

作者: Grandperhaps | 来源:发表于2020-10-15 21:32 被阅读0次

    DOM

    文档对象模型(Document Object Model,简称DOM),是 W3C 组织推荐的处理可扩展标记语言(html或者xhtml)的标准编程接口
    W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。

    DOM树

    1550731974575.png

    获取元素

    1.根据ID获取
    语法:document.getElementById(id)
    作用:根据ID获取元素对象
    参数:id值,区分大小写的字符串
    返回值:元素对象 或 null
    2.根据标签名获取元素
    语法:document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
    作用:根据标签名获取元素对象
    参数:标签名
    返回值:元素对象集合(伪数组,数组元素是元素对象)

    • 注意:getElementsByTagName()获取到是动态集合,即:当页面增加了标签,这个集合中也就增加了元素。

    3.H5新增获取元素方式

    1550733518278.png
    1550733734425.png

    4. 获取特殊元素(body,html)

    1550733794816.png

    事件

    1550734506084.png

    操作元素

    1.改变元素内容(获取或设置)

    1550735016756.png
    innerText和innerHTML的区别
    • 获取内容时的区别:
      ​ innerText会去除空格和换行,而innerHTML会保留空格和换行
    • 设置内容时的区别:
      ​ innerText不会识别html,而innerHTML会识别
      2.常用元素的属性操作
      1550735556297.png
      3.表单元素的属性操作
      1550736039005.png
      表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。

    4.样式属性操作

    1550736488634.png
    • 通过操作style属性
      元素对象.style.样式属性 = 值;


      1550736620181.png
    • 通过操作className属性

    元素对象.className = 值;
    因为class是关键字,所有使用className。

    1550737214510.png
    1550737354861.png

    相关文章

      网友评论

        本文标题:Web-API-01

        本文链接:https://www.haomeiwen.com/subject/cbjopktx.html