JS DOM编程艺术 读书笔记-第三章

JS DOM编程艺术 读书笔记-第三章
第三章 获取的元素有3种方法：

1.getElementById

document.getElementById(id)

eg:

document.getElementByld(“purchases”)

2.getElementByTagName

getElementByTagName 方法返回一个对象的数组，每个对象分别对于的文档里有着给定标签的一个元素。

【注意】getElementByTagName 与上述的getElementById 相似，但是的TagName 返回的是一个对象数组

例如：document.getElementByTagName（“li”）这个调用的则是对于的document对象的每一个列表。

与任何数组的一样，可以利用 length熟悉进行的查询该数组里的元素个数。

3.getElementByClassName

可以让我们的通过的class属性种的类名来访问的元素。

document.getElementByClassName(class)

eg:

document.getElementByClassName(“sale”)

使用这个办法还可以查找同时有多的类名的 元素 。

例如： 有一个的类 sale 又叫 important 。 则想要获取的该的元素可以在名字中间空格分隔类名即可。

document.getElementByClassName(“sale important”) 【类名的顺序不受影响】

4.获取和设置属性

查询 getAttribute

object.getAttribute(“title”) 【getAttribute方法不属于document对象，所以不能直接通过的document对象直接调用，它只能通过元素节点对象调用】

var paras = document.getElementByTagName("p");

for(var i = 0 ; i< paras.length;i++){

	var title _text = paras[i].getAttribute("title");

	if(title_text) alert(title_text);

// if(title_text) 相当于if(title_text !=null) 

}

上述代码的是查询的p元素，并且它有title 的属性值

设置 setAttribute：

object. setAttribute(attribute, value) // 对象. setAttribute(对象的属性，属性值 )

eg:

var paras = document.getElementByTagName("p");

for (var i = 0; i<paras.length;i++){
 var  title _text= paras[i].getAttribute("title");
 if(title_text){
	paras[i].setAttribute("title","brand new title text");
	alert(paras[i].getAttribute("title"));
}}

上述代码是获取全部带有的title属性的

元素，然后把他们的是title值修改为 brand new title text

【对于setAttribute 来说，做出的修改后不会反应在文档本身的源代码中，这是由于的DOM的工作模式，先加载文档的静态内容，再动态的刷新，动态刷新不影响文档的静态内容。】