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

一.节点属性

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

(1).nodeName（只读属性）

元素节点大写

var nodeName=div.nodeName.toLowerCase();//div
//toUpperCase();为大写

属性节点#+属性

document.nodeName//#document

文本节点#+text

var nodeName=div.firstChild.nodeName;//#text

注释节点#+comment

div.childNodes[1].nodeName;//#comment

(2).nodeValue（可写）

元素节点没有这个属性

div.childNodes[3]//<h1>我是标题标签</h1>
div.childNodes[3].nodeValue//undefined

属性节点 直接输出属性值

div.getAttributeNode('id');//id='box'
div.getAttributeNode('id').nodeValue;//box
div.getAttributeNode('id').value;//box

文本节点  直接输出文本

var nodeName=div.firstChild.nodeValue;//" 我是文本节点"

注释节点  直接输出注释

div.childNodes[1];//<!--我是注释-->
div.childNodes[1].nodeValue;//我是注释

(3).nodeType（只读属性）

节点代表数字

1. 元素节点=1
2. 属性节点=2
3. 文本节点(text)=3
4. 注释节点(comment)=8
5. document=9
6. DocumentFragment=11

元素节点  1

div.nodeType //1

属性节点  2

div.getAttributeNode('id');//2

文本节点  3

div.firstChild.nodeType;//3

注释节点  8

div.childNodes[1].nodeType;//8

二.方法

(1).attributes/getAttributeNode()

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

 

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

(2).hasChildNodes()

判断节点后是否还有子节点

<div>
</div>
div.hasChildNodes();//true;因为判断的是节点不是元素

(3).*

选择所有节点

var all=document.getElementsByTagName('*');
console.log(all);//

(4).body/head

在HTMLDOcument中有这两个属性

var body = document.body;//选取body元素
var head = document.head;//选取head元素

(5).title

var head = document.title;//这只能获得文本，不能获得元素

(6).documentElement

获取整个html文档元素

三.封装方法

(1).封装childNodes

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

HTMLDocument继承于Document.prototype

(2).结构树

(3).HTML%Div%Element

Element.prototype.aaa='aaa';
HTMLElement.prototype.bbb='bbb';
HTMLDivElement.prototype.ccc='ccc';
var div = document.getElementsByTagName('div')[0];
var p= document.getElementsByTagName('p')[0];
cosole.log(div.aaa);//aaa
cosole.log(div.bbb);//aaa
cosole.log(div.ccc);//aaa
cosole.log(p.aaa);//aaa
cosole.log(p.bbb);//aaa 因为HTMLParagraphElement是通过HTMLElement实例化的
cosole.log(p.ccc);//undefined 因为p是通过HTMLParagraphElement实例化的

DIV的类型

Object.prototype.toString.call(div);
//"[object HTMLDivElement]"

(4).document原型链

最后为Object.prototype

(5).DOM操作深入

-getElementById()

Document.prototype专属

ELement.prototype HtmlElement.prototype没有

-getElementsByName()

Document.prototype 有

Element.prototype 没有

-getElementsByTagName()

-getElementsByClassName()

-querySelector

-querySelectorAll

Document.prototype 有

Element.prototype 有

var p =div.getElementsByClassName('text');//输出的是一个P在div之下的