date1101DOM节点获取

雨声筱筱
103 阅读1分钟

highlight: an-old-hope

一、获取标签对象class类名

对class类名进行增、删、查:

  1. 增加：标签对象.classList.add();
  2. 删除：标签对象.classList.remove();
  3. 查看：标签对象.classList();

注意：对class类名没有修改操作。

let oDiv = document.querySelector('div');
console.log(oDiv);

// 查看class类名
console.log(oDiv.classList);

// 新增class类名
oDiv.classList.add('pupu');

// 删除class类名
oDiv.classList.remove('box');
oDiv.classList.remove('box1');

二、获取标签对象CSS样式

语法形式：标签对象.style;

  1. 获取行内式的CSS属性： 标签对象.style.CSS属性;
  2. 获取非行内CSS样式：window.getComputeStyle(标签对象).CSS属性;
  • 注意：打印颜色的时候，控制台打印的颜色是rgba()的形式，这种方式获取的是只读的属性。
let oDiv = document.querySelector('div');
console.log(oDiv);

// 行内样式
console.log(oDiv.style.width);
console.log(oDiv.style.height);
// 写法错误
// console.log(oDiv.style.background-color);
// 可通过小驼峰命名法
console.log(oDiv.style.backgroundColor);
// []语法
console.log(oDiv.style['backgroundColor']);

// 获取非行内样式属性
// 外部样式和内部样式获取元素属性

console.log(window.getComputedStyle(oDiv).backgroundColor);
console.log(window.getComputedStyle(oDiv).width);

三、获取DOM节点

<!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>
        <p>羽生</p>
        <span>结弦</span>
        <b>加粗</b>
    </div>

    <script>
        /*
            oDiv.childNodes:NodeList(7) [text, p, text, span, text, b, text]

            获取所有的子级节点(会把换行识别为一个文本，标签当成元素节点)
                div结束标签的位置开始，到p标签开始位置的换行会被识别为一个text
                p标签会被识别为一个元素节点
                p结束标签到span开始标签的换行会被识别为一个text
                span标签会被识别为一个元素节点
                span标签到结束到div标签开始的换行也会被识别为一个text
        */
        var oDiv = document.querySelector('div');
        console.log(oDiv);
        console.log(oDiv.childNodes);


        // 获取元素的所有子级元素节点(只能获取到标签 不能获取内容)
        // 运行结果：HTMLCollection(3) [p, span, b]
        console.log(oDiv.children);

        // 获取标签对象的子节点以及换行text
        // 运行结果：NodeList(7) [text, p, text, span, text, b, text]
        console.log(oDiv.childNodes);
    </script>
</body>
</html>

四、获取DOM的第一个节点

<!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>
        <p>pppppppp</p>
        <span>spanspanspanspan</span>
    </div>

    <script>
        const oDiv = document.querySelectorAll('div')[0];
        console.log(oDiv);

        // 获取标签对象的第一个子节点(不一定是子节点)
        /*
            获取到div节点内的第一个子节点
                注意此时并不是获取到了第一个元素节点
                而是div开始标签后到p开始标签钱的一段换行，这一段被识别为text(文本节点)
        
                除非你的HTML 结构不写换行
        */
        console.log(oDiv.firstChild);

        // 获取的是元素内部第一个元素节点
        console.log(oDiv.firstElementChild);
    </script>
</body>
</html>

五、获取DOM最后一个子节点

<!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>
        <p>ppppppp</p>
        <span>spanspanspanpsan</span>
    </div>


    <script>
        /*
            获取元素的最后一个子节点
        */

        const oDiv = document.querySelectorAll('div')[0];
        console.log(oDiv);

        // 打印结果：text
        // 打印最后一个节点
        console.log(oDiv.lastChild);



        // 打印结果：<span>spanspanspanpsan</span>
        // 打印最后一个标签节点
        console.log(oDiv.lastElementChild);

        
    </script>


</body>

</html>

六、获取兄弟节点

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        const oUlli = document.getElementsByTagName('li')[0];
        console.log(oUlli);
        const oUlli2 = document.getElementsByTagName('li')[1];
        console.log(oUlli2);

        // 获取所有子节点
        console.log(oUlli.childNodes);


        // 获取的是下一个兄弟节点
        // 结果：text
        console.log(oUlli.nextSibling);


        // 获取的是下一个兄弟元素节点
        // 运行结果：<li>2</li>
        console.log(oUlli.nextElementSibling);


        // 获取的是上一个兄弟节点
        // 运行结果：text
        console.log(oUlli.previousSibling);


        // 获取上一个兄弟元素节点
        // 如果没有获取的是null
        console.log(oUlli.previousElementSibling);
        // 如果有，运行结果：<li>1</li>
        console.log(oUlli2.previousElementSibling);
        
    </script>
</body>
</html>

七、获取父级节点

<!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>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        const oUlli1 = document.getElementsByTagName('li')[0];
        console.log(oUlli1);

        // 获取的是整个父元素以及里面的内容
        console.log(oUlli1.parentNode);

        // 获取的是整个父元素以及里面的内容
        console.log(oUlli1.parentElement);

        // 两个没区别
    </script>
</body>
</html>

八、节点分类

<!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>
    <ul a="100" b="200">
        <li>我是节点</li>
    </ul>

    <script>
        // 获取标签
        const oUl = document.querySelector('ul');

        // 元素节点
        const ele = oUl.firstElementChild;
        console.log(ele);

        // 文本节点
        const text = oUl.firstChild;
        console.log(text);

        // 属性节点
        // 结果：NamedNodeMap {0: a, 1: b, a: a, b: b, length: 2}
        // const attr = oUl.attributes;
        const attr = oUl.attributes[0];
        console.log(attr);


        /*
            节点类型
                nodeType
        */
        console.log(ele.nodeType);          //元素节点打印1
        console.log(text.nodeType);         //文本节点打印3
        //    console.log(attr.nodeType);   //打印undefined
        console.log(attr.nodeType);         //属性节点打印2


        /*
          节点名称
              nodeName
        */
        console.log(ele.nodeName);          //大写的LI
        console.log(text.nodeName);         //#text
        console.log(attr.nodeName);         //结果为属性名 如果没有定义哪一个属性名 就打印undefined


        /*
            节点的值
                nodeValue
        */
        console.log(ele.nodeValue);         //元素标签没有值，打印出的值为null
        console.log(text.nodeValue);        //文本text的节点值为空格
        console.log(attr.nodeValue);        //属性名的节点值为对应属性的属性值
    </script>
</body>

</html>
avatar
文章
阅读
粉丝