DOM操作获取元素节点及切换元素属性值_getelementsbyclassname修改某属性-优快云博客

本文链接：https://blog.youkuaiyun.com/z_2532040197/article/details/125787932

DOM操作简介

概念：DOM 是document object model （文档对象模型），它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口；把文档中的代码翻译成一个对象模型。

在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象。这些对象之间在文档模型数据结构中存在某种关系: 根节点父子节点同胞节点等等。

特点：

1.只有一个根节点document。

2.除了根节点外所有节点都有唯一的一个父节点。

3.document是window对象的属性。

4.全局对象模型属于BOM操作 Browser Object Model 把浏览器对外提供的接口翻译为一个对象。

5.元素的属性也是独立节点叫属性节点但是不是元素节点的子节点。

获取元素的方法

1.通过方法获取节点或元素

//H5之前的方法

document.getElementById //通过id名获取（查找速度最快）
document.getElementsByClassName //通过类名获取
document.getElementsByName //通过标签的属性name获取
document.getElementsByTagName //通过标签名获取

//H5新增的方法

document.querySelector // 获取符合的第一个元素
document.querySelectorAll //获取符合的所有元素

<!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> -->
</head>
<body>
    <div id="box1">
        <div class="box2">xiaozhang</div>
        <div class="box2">xiaozhang</div>
        <div class="box2">xiaozhang</div>
    </div>
    <a href="" class="box2">点我</a>
    <input type="radio" name="fruit" value="apple">苹果
    <input type="radio" name="fruit" value="pear">葡萄
    <input type="radio" name="fruit" value="banana">香蕉

    <script>
        var b1 = document.getElementById("box1")
        //如果没有这个id,就返回null
        console.log(b1); 

        var b2 = document.getElementsByClassName("box2")
        // 如果没有就返回 HTMLCollection []
        console.log(b2);

        var b3 = document.getElementsByTagName("a")
        // 如果没有也返回 HTMLCollection []
        console.log(b3);

        var b4 = document.getElementsByName("fruit")
        // 如果没有也是返回 HTMLCollection []
        console.log(b4);

        
        var b5 = document.querySelector("#box1 .box2")
        // 如果没有就返回null
        console.log(b5);

        var b6 = document.querySelectorAll("#box1 .box2")
        // 如果没有也是返回null
        console.log(b6);

    </script>

</body>
</html>

2.通过关系获取节点或元素

1. document.querySelector().parentElement //获取父元素

document.querySelector().parentNode //获取父节点

2. document.querySelector().children //获取子元素们

        document.querySelector().childNodes //获取子节点们

3. document.querySelector().nextElementSibling //获取下一个兄弟元素

        document.querySelector().nextSibling //获取下一个兄弟节点

4. document.querySelector().previousElementSibling //获取上一个兄弟元素

        document.querySelector().previousSibling //获取上一个兄弟节点

5. document.querySelector().firstElementChild //获取第一个子元素

        document.querySelector().firstChild //获取第一个子节点

6. document.querySelector().lastElementChild //获取最后一个子元素

        document.querySelector().lastChild //获取最后一个子节点

<!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> -->
</head>

<body>
    <div id="box1">
        <div class="box2" id="box4">2</div>
        <div class="box2">
            <div class="box3" id="box5">box3</div>
        </div>
        <div class="box2" id="box2">4</div>
        <div class="box2" id="box6">6</div>

    </div>

    <script>
        var a = document.querySelector("#box4").parentElement
        console.log(a);
        var a1 = document.querySelector("#box4").parentNode
        console.log(a1);

        var b = document.querySelector("#box1").children
        console.log(b);
        var b1 = document.querySelector("#box1").childNodes
        console.log(b1);

        var c = document.querySelector("#box2").nextElementSibling
        console.log(c);
        var c1 = document.querySelector("#box2").nextSibling
        console.log(c1);

        var d = document.querySelector("#box2").previousElementSibling
        console.log(d);
        var d1 = document.querySelector("#box2").previousSibling
        console.log(d1);

        var e = document.querySelector("#box1").firstElementChild
        console.log(e);
        var e1 = document.querySelector("#box1").firstChild
        console.log(e1);

        var f = document.querySelector("#box1").lastElementChild
        console.log(f);
        var f1 = document.querySelector("#box1").lastChild
        console.log(f1);
    </script>

</body>

</html>

切换元素的属性值

<body>
    <div id="box">xiaozhang</div>
    <input type="text" id="inp">
    <div contenteditable="true" id="box2">666</div>
    <a href="http://www.baidu.com" id="a1">点我</a>
    <br>
    <button id="btn">切换</button>

    <script>
        var btn1 = document.querySelector("#btn")
        //  给button按钮绑定一个点击事件，点击之后执行函数
        btn1.onclick = function () {
            var b1 = document.querySelector("#box")
            b1.innerHTML = "hello" //将id为box的标签内容改为hello
            var inp1 = document.querySelector("#inp")
            inp1.value = "123" //将id为inp的标签value值改为123
            var b2 = document.querySelector("#box2")
            b2.innerText = "888" //将id为box2的标签内容改为888
            var a1 = document.querySelector("a")
            a1.style.textDecoration = "none" //将a标签的下划线去掉
        }
    </script>

</body>

切换前：