DOM（文档）操作

        DOM:Document Object Model:文档对象模型

        它是XML文档和HTML的编程接口，定义了访问和操作HTML和XML文档的标准方法

        操作HTML和XML文档的标准方法

        DOM树：dom以树形目录结构表示HTML和XML文档

                document->html->head/body

        1)节点层次：

                节点层次分为父子节点和同胞节点两种。

                在节点树中，顶端节点被称为根（root）

                每个节点都有父节点，除了根节点，一个节点

                可拥有任意数量子节点

                同胞是拥有相同父节点的节点。

        2）节点分类（nodeType）

                元素节点：标签

                属性节点：标签的属性

                文本节点：标签后的换行符

                文档节点：document

        3）节点名称（NodeName）

                元素节点的标签名相同

                属性节点的属性名相同

                文本节点的#text

                文档节点的document

        4）节点的值(nodevalue)

                元素节点的undefined或null

                文本节点的文本本身

                属性节点的属性值

        5）节点类型（nodetype）

                元素  返回值 为1

                属性  返回值  为2

                文本  返回值  为3

                注释  返回值  为8

        2.操作节点

                a)

                        1)getElementById('id'):通过ID获取节点

                        2)getElementByTagName('标签')：通过标签名获取节点

                        3)getElementsByName('name'):通过标签的name获取节点，返回的是一个数组

                        4)getElementsByClassName('class'):通过类名获取节点，返回数组

                        5)querySelect('选择器'):根据选择器找到结果集中的第一个

                        6)querySelectAll('选择器'):根据选择器返回结果集

 

                b)创建DOM节点

                        1)createElement('标签名'):创建元素节点

                        2)createTextNode('动态创建'):创建文本节点（就是创建了一个字符串）

                        3)creatAttribute('class','value'):创建属性节点，第一个值是属性名，第二个值是属                  性值。

                        4)appendChild('元素'):在文档中创建一个子节点(子节点可包括（<p class='item'>你 好 </p>）整个结构)。

              

                c)插入节点

                        i).插入内部的尾部

                                父节点.appendChild(创建的节点)

                        ii)插入内部某个节点前面

                                父节点.insertBefore(创建的子节点，已知的子节点)

 

                 d)替换节点

                        父节点.replaceChild(新节点，老节点)

                e)克隆节点

                        深度克隆：包含子节点一起克隆

                        浅克隆：只会将找到的这个节点克隆，子节点不会克隆

                                cloneNode(true/false);false：浅克隆，true:深度克隆

                 f)删除节点

                        i)节点.romove():删除当前节点及子节点

                        ii)删除子节点：父节点.removeChild(子节点)

                g)节点属性操作

                        i)获取属性值

                                DOM节点.属性名//不能获取用户自定义属性值

                                DOM节点.getAttribute(属性名)//获取所有属性值

                        ii)设置属性值

                                DOM节点.属性名=表达式

                                DOM节点.setAttribute(属性名，属性值)

                        iii)删除属性值

                                DOM节点.属性名='';//使其值为空

                                DOM节点.removeAttribute('属性名')

                  h)节点文本操作

                        i)获取文本

                                节点.innerHTML，获取节点下所有内容，包含标签

                                节点.innerText，获取节点下的文本内容，过滤标签

                                节点.value，获取input输入框等表单控件内容

                                节点.getAttribute('value')value是表单属性

                        ii)设置文本

                                innerHTML='文本内容'，它会翻译html标签

                                innerText='文本内容'，它则不会翻译标签

                                节点.value='值'

                                节点.setAttribute('value',值),因为value作为属性是可以用该方法的

                        iii)删除文本

                                将以上方法后的值设为空即可

 

 

                I)DOM节点样式操作

                        a)操作样式class

                                i)获取class

                                        节点.className获取节点的所有class

                                        节点.getAttribute('class')获取节点的所有class

                                ii)设置class

                                        节点.className=值

                                        节点.setAttribute

                                iii)其它方法

                                        节点.classList.add(value);为元素添加类

                                        节点.classList.containS(value);判断元素是否含有指定类，存在返回true                                          节点.classList.remove(value);删除指定类

                                         节点.toggle(value);有就删没有就添加

                        b)操作内联样式

                                i)获取内联样式

                                        节点.style.样式属性名->获取某个具体内联样式

                                        节点.style.cssText->获取某个节点所有内联样式返回字符串

                                ii)设置内联样式

                                        节点.style.样式属性名=属性值//设置某个具体内联样式

                                        节点.style.cssText=属性值或属性列表//设置某个节点的所有内联样式