DOM

DOM概念

DOM(Document object model)：文档对象模型

节点（Node）包括元素节点，属性节点和文本节点（3）

th1代表一个元素节点（nodetype=1）

getAttributeNode方法是获取元素的属性节点，此时输出的节点类型是属性节点（2）节点名称就是属性名，节点值就是属性值

Txt1是一个文本节点（3），节点固定名称是#text，节点值文本内容

获取元素

1. getElementByld

通过元素的id来获取元素，获取到的是一个元素

getElementsByTagName

根据标签名来获取元素，获取到的是一个元素集合

getElementsByClassName

根据class属性来获取元素，获取到的是一个元素集合

getElementsByName

根据Name属性获取元素，获取到的是一个元素集合

总结：获取元素可以根据标签名获取，也可以根据id，name，class属性来获取根据id属性获取的结果是一个元素，其他的是一个元素集合

修改元素

修改内容

通过innertext属性可以读取或者设置标签的内部文本

通过innerHtml属性可以读取或者设置标签的内部文本

二者的区别：innerHTML会按照HTML的规则来解析文本，而innertext只是当做普通的文本类型

如果非要使用文本换行，就使用文本换行符\n

修改样式

A.xxx.style.yyy

b.xxx.classname="……"(相当于修改了class 属性)

添加删除元素

createElement;创建一个元素节点

createElement(“p”)创建一个段落

createTextNode：创建一个文本节点

createTextNode（“文本内容”），创建一个值为“文本内容”的文本节点

appenChild：添加子节点

removeChild：删除子节点

这是根据父节点来删除子节点，如果不知道父节点呢？

可以用这种方法，我自己删我自己

动态添加和删除的案例

思路一：获取div1下的所有段落，然后遍历，将序号为奇数的段落删除

这种方式最开始是可以的，但是随着动态添加或者删除的运行，后面的结果就不对了，因为动态删除影响了原来的顺序，程序是按照序号去判断奇偶性的

思路二：

给段落添加一个class属性标记