12.DOM节点

最新推荐文章于 2023-09-27 22:51:18 发布

李天下xue

最新推荐文章于 2023-09-27 22:51:18 发布

阅读量266

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/xuehangongzi/article/details/80418698

版权

DOM 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

一、获取DOM节点

以前学过获取DOM元素的4种方法

通过id
通过标签名
通过类class名
通过表单的name属性

获取到的是数组的话，可以通过下标来得到单个对象

现在呢，介绍两个新的方法

（1）querySelector（html5语法）返回DOM元素，如果有多个，返回第一个

（2）querySelectorAll 返回数组

二、节点类型

常见节点类型和属性

元素节点（标签）节点类型是1
属性节点，节点类型2
文本节点（标签里的内容）节点类型3

三、节点的遍历（通过某一元素，获取他的父亲孩子兄弟等的过程）

综上，找孩子节点的方法有兼容性，所以我们得封装一个找孩子节点的函数

像上面那样写的话，会报错，我们想找到ul下面的第一个li,所以如果我们最先找到的是空格的话就不能再找子节点了，而是找空格的兄弟节点，而空格的下一个兄弟节点正是li，那么我们先封装一个找下面的兄弟节点的函数吧

封装一个找兄弟节点的方法

 function next(elem){
            do{
                elem = elem.nextSibling;
            }while(elem && elem.nodeType!=1 );
            return elem;
        }

现在，接着封装first函数

找元素的第一个子节点的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复习9</title>
</head>
<body>
<ul id="ul1">
    <li class="aa">111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li class="aa">555</li>
</ul>
<script>
    var oUl1 = document.getElementById("ul1");
    function first(elem){
        elem = elem.firstChild;
        return elem.nodeType ==1? elem : next(elem);
    }
    function next(elem){
        do{
            elem = elem.nextSibling;
        }while(elem && elem.nodeType!=1);
        return elem;
    }
    console.log(first(oUl1));

</script>
</body>
</html>

四、节点操作

创建节点creatElement(” 要穿件的节点标签名”)

追加元素 xx.appendChild(yy);把yy追加到xx里面，成为xx的子元素

删除子节点父元素.removeChild(子元素)；

替换子元素父元素. replaceChild(xx,yy);

插入节点在某个节点之前父元素.insertBefore(xx,yy);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jiedian</title>
</head>
<body>
<ul id="ul1">
    <li id="aa">11</li>
    <li>22</li>
    <li class="bb">33</li>
    <li>44</li>
</ul>
<script>
    var oUl1 = document.getElementById("ul1");
    // console.log(oUl1.children);
    var oP = document.createElement("p");
    var oA = document.getElementById("aa");

    oP.innerHTML = "hhhhhh";
    // oUl1.appendChild(oP);//追加子节点
    // oUl1.removeChild(oA);//删除子节点
    // oUl1.replaceChild(oP,oA);//用p代替第一个li
    // oUl1.insertBefore(oP,oA);//在第一个之前插入p
    // document.body.appendChild(oP);
</script>
</body>
</html>

复制节点

调试断点的步骤

李天下xue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.DOM节点

一、获取DOM节点以前学过获取DOM元素的4种方法获取的得到的数组，可以通过下标来得到单个对象现在呢，介绍两个新的方法（1）querySelector（html5语法）返回DOM元素，如果有多个，返回第一个（2）querySelectorAll 返回数组二、节点类型常见节点类型和属性 * 元素节点（标签）节点类型是1 * 属性节点，...
复制链接

扫一扫