JavaScript-Dom的操作

最新推荐文章于 2024-07-12 16:55:56 发布

小欣不会输

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量1.2k

点赞数 2

文章标签：前端 js

本文链接：https://blog.csdn.net/wx112728/article/details/124393269

版权

一、查看节点

1.查看元素节点

节点类型	返回值
元素节点	1
属性节点	2
文本节点	3

我们在进行判断节点类型时需要根据返回值进行判断，用来进行判断的语法：

console.log(dom对象.nodeType);

获取节点的名称：

console.log(a.nodeName);

获取节点的值：

console.log(a.nodeValue);

二、根据父节点查找子节点

通过父节点对象查找子节点对象缺点：可能会有文本节点；优点：兼容性较好

1.父节点对象.firstChild 查找父节点下的第一个子节点

2.父节点对象.lastChild 查找父元素下的最后一个子节点

3.父节点对象.childNodes 多个查找父节点下的所有子节点

通过父节点对象查找子元素节点对象缺点：兼容性差优点：查找不到文本节点

1.父节点对象.firstElementChild 查找父节点下的第一个子元素节点

2.父节点对象.lastElementChild 查找父元素下的最后一个子元素节点

3.父节点对象.children 多个查找父节点下的所有子元素节点

<body>
    <ul id="box">
        <li>你好，小欣1</li>
        <li>你好，小欣2</li>
        <li>你好，小欣3</li>
        <li>你好，小欣4</li>
        <li>你好，小欣5</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("box");
    // console.log(oUl.firstChild);//第一个子节点   可能有文本节点  换行

    // console.log(oUl.firstElementChild);//第一个子元素节点

    // console.log(oUl.lastElementChild);//最后一个子元素节点

    // console.log(oUl.children);//ul里的所有的子元素节点对象

    console.log(oUl.firstChild.nodeType);//3
    // console.log(oUl.firstChild.nodeValue);//ul与li之间的节点

    // console.log(oUl.childNodes.length);//11   因为li之间的换行也是一个节点
    // for (var i = 0; i < oUl.childNodes.length; i++) {
    //     console.log(oUl.childNodes[i]);
    // }

    //获取元素节点
    var arr = [];
    for (var i = 0; i < oUl.childNodes.length; i++) {
        if (oUl.childNodes[i].nodeType === 1) {
            arr.push(oUl.childNodes[i]);
        }
    }
    console.log(arr);

    //父节点查找子节点：

    //通过父节点对象查找子节点对象（可能会有文本节点） 兼容性较好
    // 父节点对象.firstChild    查找父节点下的第一个子节点
    // 父节点对象.lastChild     查找父元素下的最后一个子节点
    // 父节点对象.childNodes    多个    查找父节点下的所有子节点

    // 通过父节点对象查找子节点对象 兼容性差  优点：查找不到文本节点
    // 父节点对象.firstElementChild    查找父节点下的第一个子元素节点
    // 父节点对象.lastElementChild     查找父元素下的最后一个子元素节点
    // 父节点对象.children    多个    查找父节点下的所有子元素节点
</script>

</html>

三、根据子节点查找父节点

根据子节点查找父节点

子节点对象.parentNode 通过子节点查找父节点

子节点对象.parentElement 通过子节点查找父节点

<body>
    <ul id="box">
        <li id="list">你好，小欣1</li>
        <li>你好，小欣2</li>
        <li>你好，小欣3</li>
        <li>你好，小欣4</li>
        <li>你好，小欣5</li>
    </ul>
    <div class="dad">
        <div class="son">儿子</div>
        <div class="daughter">女儿</div>
    </div>
</body>
<script>
    var oLis = document.getElementById("list");
    var son = document.querySelector(".son");

    console.log(oLis.parentNode);//查找父节点
    console.log(oLis.parentElement);//查找父元素

    console.log(son.parentNode);//查找父节点
    console.log(son.parentElement);//查找父元素

    // 子节点查找父节点
    // 子节点对象.parentNode   通过子节点查找父节点
    // 子节点对象.parentElement   通过子节点查找父元素
</script>

四、兄弟之间的查找

查找下一个兄弟节点，可能会有文本节点：

子节点.nextSibling;

查找下一个兄弟元素节点无文本节点：

子节点.nextElementSibling；

查找上一个兄弟节点可能会有文本节点

子节点.previousSibling；

查找上一个兄弟元素节点无文本节点

子节点.previousElementSibling;

五、节点的增删改

节点对象.getAttribute("属性名")；根据属性名获取属性值

节点对象.setAttribute("属性名","属性值")；

节点对象.removeAttribute("属性名")；删除相对应的属性

<body>
    <ul id="box" a="20">
        <li>你好，小欣1</li>
        <li id="list">你好，小欣2</li>
        <li>你好，小欣3</li>
        <li>你好，小欣4</li>
        <li>你好，小欣5</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById("box");
    // var oLi = document.querySelector("#list");

    console.log(oUl.getAttribute("id"));
    console.log(oUl.a);//不可以获取自定义属性
    console.log(oUl.getAttribute("a"));//可以获取自定义属性

    // 设置
    // oUl.title = "hello";
    oUl.setAttribute("title", "小欣");

    // oUl.b = 100;
    oUl.setAttribute("b", 100);

    //删除
    oUl.removeAttribute("b");
    oUl.removeAttribute("a");
    oUl.removeAttribute("title");


    // 节点对象.getAttribute("属性名")  根据属性名获取属性值
    // 节点对象.setAttribute("属性名","属性值")
    // 节点对象.removeAttribute("属性名")  删除相对应的属性

</script>

六、创建元素对象

创建对象：

document.createElement("元素名称");

追加元素对象到父元素内部最后：

父元素.appendChild(子节点);

<body>
    <div id="box">
        hello xiaoXin
    </div>
    <button id="btn">点击添加</button>
</body>
<script>
    var oDiv = document.querySelector("#box");
    var oBtn = document.getElementById("btn");
    //创建
    // var oSpan = document.createElement("span");//创建的元素对象
    // console.log(oSpan);
    // oSpan.innerHTML = "你好 小欣"

    // // 追加
    // oDiv.appendChild(oSpan);



    //点击按钮添加一个元素对象
    oBtn.onclick = function () {
        var oImg = document.createElement("img");
        oImg.setAttribute("src", "img/kun1.webp");
        // oDiv.appendChild(oImg);//加在div内部
        document.body.appendChild(oImg);//加在div外部
    }


    //创建对象
    // document.createElement("元素名称");

    //追加元素对象到父元素内部最后
    // 父元素.appendChild(子节点);
</script>

倘若图片过大我们可以在样式中进行设置。

七、实战案例-点击按钮创建圆

创建的圆的长宽，位置以及背景颜色都是随机的；这里是利用随机数做。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: fixed;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box">
        <button id="btn">创建</button>
    </div>

</body>
<script>
    var oDiv = document.querySelector(".box");
    var oBtn = document.getElementById("btn");


    oBtn.onclick = function () {
        var ball = document.createElement("div");//创建div双标记标签
        ball = oDiv.appendChild(ball);
        var r = Math.round(Math.random() * 255);
        var g = Math.round(Math.random() * 255);
        var b = Math.round(Math.random() * 255);

        var d = Math.floor(Math.random() * 100 + 1);
        var e = Math.random() * 1200;
        var f = Math.random() * 500 + 50;
        ball.style.width = d + "px";//宽
        ball.style.height = d + "px";//高
        ball.style.left = e + "px";//x轴坐标
        ball.style.top = f + "px";//y轴坐标
        ball.style.backgroundColor = `rgb(${r},${g},${b})`;
    }
</script>

</html>

小欣不会输

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-Dom的操作

一、查看节点1.查看元素节点节点类型返回值元素节点 1 属性节点 2 文本节点 3 我们在进行判断节点类型时需要根据返回值进行判断，用来进行判断的语法：console.log(dom对象.nodeType);获取节点的名称：console.log(a.nodeName);获取节点的值：console.log(a.nodeValue);二、根据父节点查找子节点通过父节点对象查找子节点对象缺点：可能会有文本节点；优点：兼容性较.
复制链接

扫一扫