Dom属性的使用方法

这次给大家带来Dom属性的使用方法，Dom属性使用的注意事项有哪些，下面就是实战案例，一起来看一下。

一、javascript的三大核心

　　1.ECMAScript js的语法标准

　　2.DOM Document object Model 文档对象模型，提供的方法可以让js操作html标签

　　3.BOM Browser Object Model 浏览器对象模型，提供的方法让js可以操作浏览器

注意：1. js里最大的boss是window，document只是window下的一个对象

1. document.documentElement 这个东西可以拿到html

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

二、DOM的属性

js ---> DOM --> html

　　js通过DOM去操作html标签

1. childNodes 返回当前对象下的所有子节点对象，会返回文本节点

注意： 在ie8下只会返回元素节点

1. nodeType 返回节点类型，元素节点返回1 文本节点返回3 注释节点返回8

2. children 返回对象下所有子元素节点，并且没有兼容问题

3. firstChild 返回第一个子节点，在IE8跟childNodes一样的表现

1. lastChild 返回最后一个子节点 同上

1. firstElementChild 返回最后一个元素节点，不兼容IE8

1. nextSibling 下一个兄弟节点 在主流的浏览器，可能会拿到除了元素节点以外的节点，在IE8里，只会返回元素节点，如果没有就返回null

2. previousSibling 上一个兄弟节点 同上

3. nextElementSibling 下一个兄弟元素节点 如果没有返回null 不兼容IE678

1. previousElementSibling 上一个 同上

2. parentNode * 返回父节点 没有兼容性

3. offsetParent 返回定位父级，如果都没有找到，最后返回body上，没有兼容问题

　　13.nodeName 返回标签的构造器 标签名大写字母

三、DOM的一些方法

　　createElement(‘p’)

　　　　这个里面是标签

　　　　新建元素节点，需要接受一个参数，参数就是需要新建的标签。

　　createTextNode（）

　　　　新建文本节点

　　createComment（）

　　　　新建注释节点

节点操作

　　添加元素节点

　　　　1. 父级.appendChild(子节点)

　　　　把子节点添加到父节点里去 往父级的所有子元素节点后 追加一个节点

　　2. 父级.insertBefore(子节点, 指定的子节点)

　　　　添加到指定的节点前面

1. 父级.removeChild(需要删除的节点)

　　1.克隆节点 cloneNode

　　　　克隆节点， 克隆母体.cloneNode()

　　　　函数接收一个参数，这个参数是一个布尔值，默认false，浅复制， true深度复制

　　　　浅复制：只复制标签

　　　　深度复制：把跟这个标签对象相关的一些标签的行内的信息一起复制，不会复制js里的自定义属性。

　　这是我对dom学习的笔记，如果能够帮助到你，我会非常高兴。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JavaScript之优化DOM

微信小程序怎么实现数据双向绑定
JavaScript的字符串怎样使用

Atas ialah kandungan terperinci Dom属性的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!