Javascript初学篇章_7(DOM)

时间:2021-11-24 15:08:49

DOM 文档对象模型
DOM (document object model) 文档对象模型,它定义了操作文档对象的接口。
DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系。 
一、节点 
节点(node) 一词来自于网络理论,这代表着网络中一个个的连接点,网络是由节点构成的。
对于html文档也是一样,文档是由节点构成的集合。
1.元素节点
元素节点如 <body> <p> <div> 之类的元素,这些元素在文档中的布局形成了文档的结构。
2.文本节点
文本节点指的是元素节点中的内容,但并非所有的元素节点都包含有文本节点。
3.属性节点
元素都或多或少有一些属性,属性的作用是对元素作出更具体的描述。属性节点总是被包含在 元素节点当中。

二、获取文档对象
1. querySelector() HTML5新加入的方法,通过传入合法的CSS选择器,即可获取符合条件的第一个元素

例:document.querySelector(“#test”); //返回id为test的首个div

2. querySelectorAll() HTML5新加入的方法,通过传入合法的CSS选择器,即可获取所有符合条件的元素,返回对象数组

例:document.querySelectorAll(‘div.foo’);//返回所有带foo类样式的div元素对象

要注意:使用这上面两个方法无法查找带伪类状态的元素,比如querySelector(‘:hover’)不会得到 期结果

3.getElementById()

说明:这个方法返回一个与给定id属性值的元素节点相对应的对象。

document.getElementById(‘box’);

4.getElementsByTagName()

说明:这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

document.getElementsByTagName(‘li’);

5.getElementsByName() 

说明:通过 name 获取一个对象数组三、间接引用节点

三、间接引用节点
1.引用子节点

每个节点都有一个childNodes集合属性,类型是数组对象,表示该节点的所有子节点
的集合。这些子节点按

照其在文档中出现的顺序排列,因此可以通过索引来依次访问各个子节
点。

document.childNodes [0].childNodes[0]    //引用<head>节点
document.childNodes[0].childNodes[1] //引用<body>节点
element.firstChild; //第一 个子结点
element.lastChild; //最后一个子结点
element.parentNode; //引用父节点
element.nextSibling; //引用下一个兄弟节点
element.previousSibling; //引用上一个兄弟节点

四、获取节点信息

1.nodeName 获取节点名称

语法:Node.nodeName;
不同的类型的节点,nodeName的返回值有所差异:

元素节点:返回标记名称;
属性节点:返回属性名称;

文本节点:返回文本 #text

2.nodeType 获取节点类型

语法:Node.nodeType;

元素节点:返回 1

属性节点:返回 2
文本节点:返回 3

3.nodeValue 获取节点的值

语法: Node.nodeValue;

元素节点:返回null

属性节点:返回节点值

文本节点:返回文本内容

五、处理属性节点
1. getAttribute 获取节点属性值

语法:object.getAttribute(attribute)

var a = document.getElementsByTagName(‘a’);
for(var i=0; i<a.length; i++){
alert(a[i].getAttribute(‘title’));
}

2.setAttribute() 设置节点属性值

语法:object.setAttribute(attribute, value)

var link = document.getElementById(‘link’);
link.setAttribute(‘title’, ‘链接提示信息’);

六、处理文本节点

1. node.innerHTML
获取该节点下的包含HTML标签的文本内容

var body = document.querySelector(‘body’);
alert(html.innerHTML);2. node.textContent

获取该节点下的纯文本内容

var body = document.querySelector(‘body’);
alert(html.textContent);

注:两者的区别在于,innerHTML获取的文本带有标签,而textContent获取的文本把标签的除去。