JavaScript DOM编程艺术——读书笔记1-CSDN博客

本文链接：https://blog.csdn.net/hustcw98/article/details/79772884

DOM学习笔记

DOM(Document Object Model)是一个好东西.

document

创建一个网页并加载到web浏览器里的时候，根据你的网页文档就会生成一个文档对象

object

网页内容的载体就是object

model

DOM把文档表示成一棵节点树

节点

DOM的原子是元素节点（元素节点就是p,li,ul等标签）
节点可以包含节点
属性节点（属性节点即为元素节点里包含有的各种属性）

基础的4个方法

getElementById()

传入参数为id.此方法返回一个document里的独一无二的元素，这个圆度的HTML的id属性为传入值.

getElementsByTagName()

传入参数为HTML标签的名字，并且此方法返回的是一个数组.比如
此时就会返回一个对象数组，每个对象对应的是html里的li元素.可以尝试写一段代码，输出文档中所有li元素的类型：
```
var items = document.getElementsByTagName("li");
for(var i = 0;i<items.length;i++){
    alert(typeof items[i]);
}
```
使用通配符
把通配符”*”放到引号中，如果想知道某文档中一共有多少个节点，用通配符当参数去调用getElementsByTagName()方法：
```
alert(getElementsByTagName("*").length)
```
搭配getElementById()使用
要得到某一个特定id的元素中包含有多少个li，可以使用具体的对象而非document去调用getElementsByTagName()
```
var special = document.getElementById("special");
var special_li = special.getElementsByTagName("li");
```

getAttribute()

通过以上两个函数可以的到DOM中的元素节点，找到元素后就可以使用getAttribute()方法把它的各种属性值查询出来.此方法只有一个参数，就是打算查询的属性的名字。

注意：此方法不能通过document对象来调用，只能用元素节点对象来调用

var paras = document.getElementsByTagName("p");
for(var ii=0;ii < paras.length;ii++){
    alert(paras[ii].getAttribute("title"));
}

setAttribute()

很明显了，此方法传入两个参数，atrribute和value：（如果原本不存在该属性，则自动创建）

var paras = document.getElementsByTagName("p");
for(var ii=0;ii<paras.length;ii++){
    var title_text = paras[i].getAttribute("title");
    if(title_test){
        paras[ii].setAttribute("title","new title");
        alert(paras[ii].getAttribute("title"));
    }
}