JavaScript 中的DOM1

最新推荐文章于 2021-09-10 11:19:24 发布

weixin_34342992

最新推荐文章于 2021-09-10 11:19:24 发布

阅读量100

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000005999119

版权

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>

weixin_34342992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 中的DOM1

DOM 文档对象模型文档对象模型：定义为了能够让程序(js)去操作页面中的元素节点层次节点之间的关系构成了节点层次，html 页面的可以画出一个以html标签为根节点的树形结构DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）<html lang="en"><head> ...
复制链接

扫一扫

JavaScript 中的DOM1

DOM 文档对象模型

节点层次

节点关系

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

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

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

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

parentNode 当前节点的父级节点

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

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

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