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

一、节点属性

（1）nodeName属性（只读）

返回节点的名字

console.log(div.nodeName); 
// DIV
console.log(div.childNodes[1].nodeName); 
// #comment
console.log(div.childNodes[3].nodeName); 
// #text
console.log(document.nodeName);
// #document
console.log(div.getAttributeNode('style').nodeName);
// style

元素节点的nodeName是大写，变成小写可以用toLowerCase()

// 变小写
var nodeName = div.nodeName.toLowerCase(); //div
// 变大写
var str = 'div';
str.toUpperCase(); // DIV

（2）nodeValue属性（可写）

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

元素节点没有nodeValue属性，返回null

属性节点还可以通过value来访问值

console.log(div.getAttribute('id').value); 
// "box"

nodeValue是可写的

（3）nodeType属性（只读）

返回节点的节点号

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

二、方法

（1）attributes/getAttributeNode()方法

<div class="box" id="box" style="background-color:green;"></div>

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

结果：

attributes输出后是一个类数组，可以通过下标访问到属性

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

getAttributeNode()是通过属性名来访问

console.log(div.getAttributeNode('id')); //id = "box"

获取属性值：

div.getAttributeNode('id').nodeValue //box
div.getAttributeNode('id').value //box
div.attributes[1].nodeValue//box
div.attributes[1].value//box

（2）hasChildNodes()方法

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

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

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

三、封装方法

（1）封装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));

类数组方式写：

function elemChildren(node) {
    var temp = {
        'length': 0,
        'push': Array.prototype.push,
        'splice': Array.prototype.splice
    },
        len = node.childNodes.length;
    for (var i = 0; i < len; i++) {
        var childItem = node.childNodes[i];
        if (childItem.nodeType === 1) {
            //temp[temp['length']]=childItem;
            //temp['length']++;
            temp.push(childItem);
        }
    }
    return temp;
}

四、DOM结构

（1）Document、HTMLDocument、document之间的关系

1. HTMLDocument是document的构造函数
2. HTMLDocu.prototype是document的原形
3. Document是HTMLDocument的构造函数
4. Document.prototype是HTMLDocument的原形

（2）Text、Comment

1. Text是文本节点的构造函数
2. Comment是注释节点的构造函数
3. Text.prototype是Text是原形
4. Comment.prototype是Comment的原形
5. CharacterData是Text/Coment原形的原形

示例：

（3）Element、HTMElement、元素节点构造函数

1. HTML***Element是元素节点的构造函数
2. HTML***Element.prototype是元素节点的原形
3. HTMLElement是元素节点原形的原形
4. Element是HTMLElement的原形，即元素节点的太爷爷

示例：

（4）Node

所有的DOM节点都继承了Node.prototype，它不是原形链的最顶端，最顶端是Object.prototype

五、DOM操作深入

（1）getElementByID

只有Document.prototype上面有这个方法

dom元素是通过构造函数实例化出来的，document.getElementsByTagName()只是选择元素

（2）getElementByName

只有Document.prototype上面有这个方法

（3）getElementByTagName、getElementsByClassName & querySelector 、querySelectorAll

这些方法在Documen.prototype、Element.prototype上面都有

所以元素节点也可以通过这些方法访问元素

（4）*通配符

选择所有的元素标签

因为它选择的是元素标签，所以只能与document.getElementsByTagName搭配使用

（5）document.body/head/title/documentElement

document.body/head: 直接获取body和head（HTMLDocument.prototype）

document.title: 获取里面的是标签里面的文本，而不是元素标签（HTMLDocument.prototype）

document.documentElement： 直接获取html元素标签（Document.prototype）

这些属性只能使用不能访问

六、作业

（1）在原型上遍历一个父元素的子节点

（2）在原形上写出一个元素的第N层父级元素

n是多少就循环多少次，0就返回自己；大于0小于等于6时就返回对应的父级元素；就返回当n大于6时，elem肯定就等于html元素，只要当elem等于了html元素，下一个循环就会被赋值为null，然后返回出去，停止循环。