JavaScript 中的DOM1

最新推荐文章于 2025-08-22 23:25:37 发布

原创最新推荐文章于 2025-08-22 23:25:37 发布 · 643 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom #文档

js+jq 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了DOM文档对象模型的基本概念，包括节点类型及其属性，如元素节点、文本节点等，并详细探讨了DOM中节点间的关系及操作方法，例如获取子节点、父节点等。

DOM 文档对象模型

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

节点层次

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

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

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

其中：

graph LR
1-->元素节点
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>