学习前端第四十一天（节点属性，特性和属性）_元素节点 outerhtml 修改标签-CSDN博客

本文链接：https://blog.csdn.net/xggfdf/article/details/139007174

一、节点属性

1、nodeType属性，获取 DOM 节点类型

对于元素节点 elem.nodeType == 1，

对于文本节点 elem.nodeType == 3，

对于注释节点 elem.nodeType == 8，

对于 document 对象 elem.nodeType == 9，

2、nodeName和tagName，节点名称，标签名称

tagName仅适用于元素节点，显示元素节点的标签名

nodeName适用于所有Node，对于元素，它的意义与 tagName 相同。对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串。

<body>
    <!-- hello -->
    <div id="box">hello div</div>
    <script>
        // nodeName，tagName。节点名称，标签名称
        const nodes = document.body.childNodes;
        console.log(nodes[0].nodeName)  // #text
        console.log(nodes[1].nodeName)  // #comment
        console.log(nodes[2].nodeName)  // #text
        console.log(nodes[3].nodeName)  // DIV

        console.log(nodes[1].tagName)   // undefined
        console.log(nodes[2].tagName)   // undefined
        console.log(nodes[3].tagName)   // DIV
    </script>
</body>

3、innerHTML，outerHTML

innerHTMl 获得且可以修改元素节点中的内容，可以添加标签

outerHTML 获得且可以修改整个标签和标签内的元素，可以修改

两者都可以显示元素节点的内容，并且可以解析其中的标签；区别在于是否可以对元素节点的最外层标签进行访问和修改

<body>
    <div id="box">hello div <em>emm</em></div>

    <script>
        // outerHTML 获得整个标签和标签内的元素，可以修改
        const divEL = document.getElementById("box");
        console.log(divEL.innerHTML);  // hello div <em>emm</em>
        console.log(divEL.outerHTML);  // <div id="box">hello div <em>emm</em></div>

        divEL.outerHTML = "<p>div标签直接被<b>替代</b></p>"
        // 在检查时会有体现
    </script>
</body>

4、 textContent，同innerText

提供了对元素内的文本的访问权限，仅文本，去掉所有 <tags>。

与innerHTMl不同：

1.使用innerHTMl会展示元素节点内的标签，使用textContent不会展示元素节点内的标签；

2.在使用两者对元素节点进行修改时，innerHTMl会作为 HTML插入，解析标签并在代码层面实现该标签，textContent“作为文本”插入，所有符号均按字面意义处理

所以对纯文本处理使用textContent比较安全

<body>
    <div id="box">hello div <em>emm</em></div>

    <script>

        const divEL = document.getElementById("box");
        console.log("innerHTML:", divEL.innerHTML);      // innerHTML: hello div <em>emm</em>    
        console.log("textContent:", divEL.textContent);  // textContent: hello div emm     
        console.log("innerText:", divEL.innerText);      // innerText: hello div emm 

        // divEL.textContent = "<em>emm</em>"; // 保留标签
    </script>
</body>

5、 nodeValue/data：文本节点内容，两者几乎相同

文本节点，具有它们的对应项：nodeValue 和 data 属性。

<body>
    <!-- hello comment-->
    <script>
        //  nodeValue/data：文本节点内容，两者几乎相同
        const comment = document.body.childNodes[1]
        console.log(comment.nodeValue); // hello comment
        console.log(comment.data); // hello comment
        setTimeout(() => {
            comment.data = "hello data"
            console.log(comment.nodeValue); // hello data
            console.log(comment.data); // hello data
        }, 2000);
    </script>
</body>

6、hidden true/false 指定元素是否可见

先消失后显示

<body>
    <div id="box">hello div <em>emm</em></div>
    <script>
        // hidden  true/false 指定元素是否可见
        const divEL = document.getElementById("box");
        divEL.hidden = true;
        setTimeout(() => {
            divEL.hidden = false;
        }, 3000);
    </script>
</body>

二、特性和属性

1、元素节点类似对象，有属性

可以用常规方法添加新的属性和方法

document.body.myData = { name: 'Caesar', title: 'Imperator' };

document.body.sayTagName = function() { alert(this.tagName); };

还可以修改原型，给每个都加上想要的属性

HTMLElement.prototype.username = "div"

HTMLElement.prototype.say = function () { console.log(this.username) }

属性区别大小写

2、HTML特性

有标准特性和非标准特性

标准特性会生成DOM属性，非标准特性不会

以下方法可以访问特性

elem.hasAttribute(name) —— 检查特性是否存在。
elem.getAttribute(name) —— 获取这个特性值。
elem.setAttribute(name, value) —— 设置这个特性值。
elem.removeAttribute(name) —— 移除这个特性。

<body>
    <!-- 特性，标准特性，非标准特性 -->
    <!-- 标准特性必定在属性中有一样的，标准特性和属性同步 -->

    <input id="input" type=" text" name="username" age="20" value="xc">

    <script>
        const input = document.getElementById("input");
        console.log(input.id);     // input 标准特性
        console.log(input.type);   // text 标准特性
        console.log(input.age);    // undefined 非标准特性

        // 获得且修改特性，判断某个特性是否存在，标准特性修改对界面有影响
        console.log(input.getAttribute("id"))
        console.log(input.getAttribute("age"))

        console.log(input.hasAttribute("age"))
        console.log(input.hasAttribute("dw"))

        setTimeout(() => {
            input.removeAttribute("age"); // 移除非标准特性对页面无影响
            input.setAttribute("value", "xxx"); // 修改或移除标准特性对页面有影响
        }, 3000);

    </script>
</body>

3、属性特性同步

修改与页面有关的标准特性/属性，页面会发生变化

<body>
    <input id="input" type=" text" name="username" age="20" value="xc">

    <script>
        const input = document.getElementById("input");

        // 属性和标准特性同步
        setTimeout(() => {
            input.value = "dwd";  // 修改与页面有关的属性，页面会发生变化
        }, 2000);
        setTimeout(() => {
            input.type = "checkbox";  // 修改与页面有关的属性，页面会发生变化
            console.log(input.getAttribute("value"))  // dwd
            console.log(input.getAttribute("type"))  // checkbox
        }, 4000);
    </script>
</body>

4、属性设置更方便，类型多样，优先属性设置

        setTimeout(() => {
            input.type = "checkbox"
        }, 2000);

        setTimeout(() => {
            input.setAttribute("type", "radio");
            console.log(input.type)
        }, 5000);

        setTimeout(() => {
            input.setAttribute("id", "xc");
            console.log(input.id)
            console.log(input.getAttribute("id"))
        }, 10000);
        // 因为有的特性改变后属性不一定变，所以规定属性设置用属性获取，特性设置用特性获取

5、特性获取的是字符串，属性获取的是对象类型

使用属性获取更容易进行修改等操作

<body>
    <input id="input" type="text" style="font-Size:50px ;color: yellow">

    <script>
        // 特性获取的是字符串，属性获取的是对象类型
        const input = document.getElementById("input");  // font-Size:50px ;color: yellow
        console.log(input.getAttribute("style"));  // { }
        console.log(input.style);

        // 使用属性获取更容易进行修改等操作
        console.log(input.style.fontSize);
        console.log(input.style.color);
        input.style.color = "blue";
    </script>
</body>

6、非标准特性，dataset

所有以data为前缀的特性，都会放在一个对象dataset中，访问时无需加前缀

像 data-order-state 这样的多词特性可以以驼峰式进行调用：dataset.orderState。

<body>
    <!-- // 非标准特性，加前缀 -->
    <!-- 所有以data为前缀的特性，都会放在一个对象dataset中，访问时无需加前缀 -->
    <input id="input" type="text" data-age="19" data-min-height="170" style="font-Size:50px ;color: yellow">

    <script>
        const input = document.getElementById("input");
        console.log(input.dataset);
        console.log(input.dataset.age);

        // 设置dataset对象内容
        input.dataset.today = "Wes";
        console.log(input.dataset.today)
        console.log(input.dataset.minHeight)

    </script>
</body>