DOM学习笔记

DOM学习笔记

1.DOM结构

树形结构

2.增加操作

html:id为box的div标签

x = document.createElement(“”); //创建标签

x.innerHTML = “”; //给x赋值

box.appendChile(x); //将x放在指定位置，拼接节点

box.insertBefore(新标签，旧标签); //需获取旧标签然后创建新标签并赋值

x.setAttribute(“myname”,“x1”); //将x标签的myname属性设置为x1

通过setAttribute设置的自定义属性，点语法是不能调用的。

x.getAttribute(“myname”); //获取myname属性的值

var a = box.clone(true); //true表示复制时包含box的子标签，false则不

3.删除操作

先获取标签，再用父级.removeChild(获取后赋值的变量); //删除子节点

removeAttributeNode()；//删除属性节点

4.修改操作

replaceChild(新标签，旧标签); //替换子节点

setAttribute(); //修改属性值

5.查找操作

5.1 getElementById()

通过id获取元素，返回匹配元素。

5.2 getElementsByTagName()

通过标签名获取元素，返回类数组集合。

5.3 getElementsByClassName()

通过class获取元素，返回类数组集合。ie6、ie7不适用

5.4 getElementsByName()

通过name名获取元素（表单常用），返回类数组集合

5.5 querySelector()

新的es6标准，通过css选择器获取元素，返回匹配元素

5.6 querySelectorAll()

新的es6标准，通过css选择器获取元素，返回类数组集合

5.7 获取下一个兄弟节点

(1) nextSibling

• 有兼容问题，ie9以上或有些浏览器会将后面的换行部分作为节点进行处理。
• 可以使用nodeType查看节点类型，返回值：元素节点(1)、属性节点(2)、文本节点(3)、注释(8)。

(2) nextElementSibling

可以忽略文档节点，只获取元素节点，但是ie6、7、8不认。

5.8 获取上一个兄弟节点

(1) previousSibling

(2) previousElementSibling

用法与上一样

5.9 获取子节点

(1) childNodes：会获取非元素类型的子节点

(2) children：获取元素字节点，无兼容问题，推荐使用

5.9.1 第一个字节点

(1) firstChild：ie6、7、8无问题、现代浏览器有问题

(2) firstElementChild：ie6、7、8不兼容

5.9.2 最后一个字节点

(1) lastChild

(2) lastElementChild

问题同上

5.10 获取父级节点

parentNode

6.获取节点后的操作

6.1通过点语法调用标签属性

6.2通过style属性控制样式

6.3通过classList控制样式

(1) add(class1,class2…) 添加类名

(2) remove(class1,class2…) 删除类名

(3) replace(oldClass,newClass) 替换类名

(4) contains(class) 是否包含某个类名，返回布尔值

(3) toggle(class,true/false) 如果类名存在就删除，不存在就添加，true强制添加，false强制删除