JavaScript 中的DOM1

来源：互联网发布：外国人怎么淘宝买东西编辑：程序博客网时间：2024/06/06 06:37

DOM 文档对象模型

文档对象模型：定义为了能够让程序(js)去操作页面中的元素

节点层次

节点之间的关系构成了节点层次，html 页面的可以画出一个以html标签为根节点的树形结构
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）

<html lang="en"><head>    <title>Document</title></head><body>    <p>hello world!!!</p></body></html>

每个节点都有一个nodeType属性，用于表明节点的类型。DOM节点类型有12种。。。。

其中：

graph LR1-->元素节点2-->文本节点3-->属性节点

<!DOCTYPE html><html lang="en"><head>    <title>Document</title></head><body>    <p id="p1">hello world!!!</p>    <script>        var oP = document.getElementById('p1');        alert(oP.nodeType); // 1    </script></body></html>

节点关系

childNodes 子节点列表集合（只读属性有兼容性问题）

<ul id="ul1">    <li>11111</li>    <li>22222</li>    <li>3333</li>    <li>44444</li></ul><script>    var oUl = document.getElementById('ul1');    console.log(oUl.childNodes);</script>

从截图中可以看出这段代码中ul的子节点有9个，这说明使用childNodes获取的节点包括了文本节点和元素节点

childNodes 在低版本的ie 浏览器下获取的节点只包括元素节点，这就导致了兼容性问题

如何解决兼容性？？

根据子节点的nodeType属性值判断

for (var i=0; i<oUl.childNodes.length; i++) {     if ( oUl.childNodes[i].nodeType == 1 ) {        oUl.childNodes[i].style.background = 'red';     } }

children 子节点列表集合（只读属性推荐使用）

children获取的子节点只包含元素节点

for (var i = 0; i<oUl.children.length; i++){    oUl.children[i].style.background = 'red';}

firstChild （firstElementChild） lastChild (lastElementChild) 第一个子节点最后一个子节点

firstChild 、lastChild和childNodes同样的存在兼容性问题，在低版本ie浏览器中只能获取到元素节点

firstElementChild 、 lastElementChild获取第一个元素子节点，最后一个元素子节点 * 推荐使用 *

var oUl = document.getElementById('ul1');//    oUl.firstChild.style.background = 'red';//标准浏览器 报错//    oUl.lastChild.style.background = 'red';//标准浏览器 报错oUl.firstElementChild.style.background = 'red';oUl.lastElementChild.style.background = 'red';

nextSibling nextElementSibling 下一个兄弟节点 previousSibling previousElementSibling 上一个兄弟节点

nextSibling previousSibling 存在兼容性问题

nextElementSibling previousElementSibling* 推荐使用 *

<script>    var oUl = document.getElementById('ul1');    var firstEle = oUl.firstElementChild;    var lastEle = oUl.lastElementChild;    firstEle.nextElementSibling.style.background = 'red';    lastEle.previousElementSibling.style.background = 'green';</script>

parentNode 当前节点的父级节点

实例：点击删除父级节点的 li

<ul id="ul1">    <li>11111<a href="javascript:;">删除</a></li>    <li>22222<a href="javascript:;">删除</a></li>    <li>33333<a href="javascript:;">删除</a></li>    <li>44444<a href="javascript:;">删除</a></li></ul><script>    var aA = document.getElementsByTagName('a');    for (var i=0; i<aA.length; i++) {        aA[i].onclick = function() {            this.parentNode.style.display = 'none';        }    }</script>

0 0