DOM操作基本功

Posted 2021-01-09 suiucat

一、获取元素节点 (通过document对象调用)：

　　1.getElementById()

    　　通过id属性获取一个元素节点对象    [bject htmlCollection]

　　2.getElementsByTagName()

　 　　通过标签名获取一组元素节点对象  [object HTMLCollection]

　　3.getElementsByName

     　　通过name属性获取一组元素节点对象

二、获取元素的子节点 (通过具体的元素节点调用)

        1.(方法)getElementsByTagName()

　　　 返回当前节点的指定标签名的后代节点的一组对象

　　2.（属性）childNodes

　　　 代表当前节点的所有子节点

　　3.（属性）firstChild

　　　　代表当前节点的第一个子节点

　　4.（属性）lastChild

　　　　代表当前节点的第一个子节点

　　PS:   1、 如果当前节点只有一个子节点，那么 firstChild和lastChild等效；

　　　　  2、childNodes属性返回一个NodeList，NodeList.length存在兼容性，在IE8+

　　　　　　 和Chrome中子节点前的空白处（当作Text节点计算）和换行都算作文本节点。

　　　　　　 IE8以下则忽略空白和换行，所以得到的NodeList值不一样。

　　　　　　如果只需要获取子元素节点可用children属性替代

　　　　3、firstChild属性存在兼容性IE8+会把空白处当作第一个子节点，而IE8以下则忽略。

三、获取父节点和兄弟节点 (通过具体的元素节点调用)

       1.(属性) parentNode

　　　　代表当前节点的父节点

　　2.(属性) previousSibling

　　　　代表当前节点的前一个兄弟节点

　　3.(属性) nextSibling

　　　　代表当前节点的后一个兄弟节点  

　　PS:  1、parentNode 属性会忽略子节点与父节点之间的空白

　　　　 2、perviousSibling属性会获取该节点与前一个兄弟节点之间的空白 

　　　　　　如需忽略该空白，可用previousElementSibling属性代替（兼容IE8+）

　　　　3、nextSibling属性和previousSibling属性存在同样的问题

　　　　　　同样，如需忽略该空白可用nextElementSibling属性代替

四、元素节点的属性 （获取操作：元素节点.属性名）

　　1.获取

　　　　如：element.value

　　　　　　 element.className (获取class属性的值)

　　　　　　 element.id

　　　 　PS: 用element.class来获取class属性无效。

        2.修改

　　　　　　element.value = "number"

五、其他

　　获取element元素的文本值，以下两种操作形式效果相同：

　　*　　element.innerHTML

　　*　　element.firstChild.nodeValue

 

        innerText 和 innerHTML的区别：

       *　　 innerHTML属性获取元素的所有内容

       *　　 innerText属性自动去除子元素中的标签，获取子元素中的text，