DOM-3 【节点属性-方法-封装方法-DOM结构】

2024-04-05 08:21:31

一、节点属性

（1）节点及对应节点号

元素节点 > 1
属性节点 > 2
文本节点 > 3
注释节点 > 8
doucument > 9
DocumentFragment > 11

（2）nodeName属性

<div class="box" id="box" style="background-color:green;">
    我是文本节点
    <!--我是注释节点-->
    <h1> 我是标题标签</h1>
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
</div>

var div = document.getElementsByClassName('box')[0];
console.log(div.nodeName); // DIV
// 变小写
var nodeName = div.nodeName.toLowerCase(); //div
// 变大写
var str = 'div';
str.toUpperCase(); // DIV

console.log(div.firstChild); // "我是文本节点"
console.log(div.firstChild.nodeName); // #text

console.log(div.childNodes[1]); // <!--我是注释节点-->
console.log(div.childNodes[1].nodeName); // #comment

console.log(div.childNodes[2]); // <h1> 我是标题标签</h1>
console.log(div.childNodes[2].nodeName); // #H1

console.log(div.childNodes[3]); // "我是文本节点"
console.log(div.childNodes[3].nodeName); // #text

元素节点的nodeName是标签名的大写，要变成小写可以用toLowerCase()，其它的节点是#xxx的形式

nodeName是只读的属性

（3）nodeValue属性

var div = document.getElementsByClassName('div')[0];
console.log(div.nodeName); // DIV
// 变小写
var nodeName = div.nodeName.toLowerCase(); //div
// 变大写
var str = 'div';
str.toUpperCase(); // DIV

var div = document.getElementsByClassName('box')[0];
console.log(div.firstChild.nodeValue); // "我是文本节点"
console.log(div.childNodes[1].nodeValue); // <!--我是注释节点-->
console.log(div.childNodes[3].nodeValue); // null
console.log(div.getAttribute('id').nodeValue); // "box"
console.log(div.getAttribute('id').value); // "box"

元素节点没有nodeValue这个属性，属性、文本、注释节点都有nodeValue这个属性

对于属性节点后面跟nodeValue/vale都可以找到对应的值

nodeValue是可写的，属性、注释、文本可用

（4）nodeType属性

返回节点对应的数字

<div class="box" id="box" style="background-color:green;">
    我是文本节点
    <!--我是注释节点-->
    <h1> 我是标题标签</h1>
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
</div>

var div = document.getElementsByClassName('box')[0];

console.log(div.nodeType);  // 1
console.log(div.firstChild.nodeType);  // 3
console.log(div.childNodes[1].nodeType);  // 8
console.log(div.getAttributeNode('id').nodeType);  // 1
div.nodeType = 5;
console.log(div.nodeType); // 1

nodeType是只读的

（5）封装children

children IE7以下是不支持的，所以可以用childNodes封装一个

<div class="box" id="box" style="background-color:green;">
    我是文本节点
    <!--我是注释节点-->
    <h1> 我是标题标签</h1>
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
</div>

var div = document.getElementsByClassName('box')[0];

function elemChildren(node) {
    var arr = [],
        children = node.childNodes;

    for (var i = 0; i < children.length; i++) {
        var childItem = children[i];

        if (childItem.nodeType === 1) {
            arr.push(childItem);
        }
    }

    return arr;
}

console.log(elemChildren(div));

用类数组方式写：

（6）attributes属性

元素的属性集合

<div class="box" id="box" style="background-color:green;">
    我是文本节点
    <!--我是注释节点-->
    <h1> 我是标题标签</h1>
    <a href="">我是超链接</a>
    <p>我是段落标签</p>
</div>

var div = document.getElementsByClassName('box')[0];
console.log(div.attributes);

结果：

获取属性：

console.log(div.attributes[1]); // id = "box"
console.log(div.getAttributeNode('id')); //id = "box"

获取值和更改值：

nodeValue是可写的

二、方法

（1）hasChildNodes()方法

判断元素有没有子节点，返回true或false

<div>	// 换行符也是文本节点
</div>

var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); // true

<div></div>

var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); // flase