一、JS中的DOM对象
- Document对象
- Element对象
- 属性对象
- 文本对象
- Node节点对象
二、Document对象
常用方法如下:
1、write()
2、getElementById()
3、getElementsByName()
4、getElementsByTagName
三、Element对象
常用方法如下:
1、getAttribute("属性名称"):获取属性值
2、setAttribute("属性名称", "设置的值"):设置属性值
3、removeAttribute("属性名称"):删除属性
4、父标签.getElementsByTagName("标签名"):获取标签下面的所有子标签
四、Node对象
常用属性一:
1、标签节点对应的值
nodeType: 1
nodeName: 大写标签名称 比如SPAN
nodeValue: null
2、属性节点对应的值
nodeType: 2
nodeName: 属性名称
nodeValue: 属性的值
3、文本节点对应的值
nodeType: 3
nodeName: #text
nodeValue: 文本内容
常用属性二:
1、attributes:包含的是一个节点的所有属性的集合
2、parentNode:获取该节点的父节点
3、childNodes:获取该节点的所有子节点(兼容性差)
4、firstChild:该节点的第一个子节点
5、lastChild:获取该节点的最后一个子节点
6、nextSibling:返回一个给定节点的下一个兄弟节点
7、previousSibling:返回一个给定节点的上一个兄弟节点
五、操作dom树
1、父节点.appendChild(子节点):添加子节点到末尾
2、父节点.insertBefore(newNode,oldNode):在某个节点之前插入一个新的节点
3、父节点.removeChild(子节点):删除指定节点
4、父节点.replaceChild(newNode,oldNode)方法: 替换节点
5、cloneNode(true):赋值节点,(参数true表示复制子节点,不需要则传递false即可)
操作dom树总结:
获取节点使用方法
getElementById():通过节点的id属性,查找对应节点。
getElementsByName():通过节点的name属性,查找对应节点。
getElementsByTagName():通过节点名称,查找对应节点
插入节点的方法
insertBefore方法:在某个节点之前插入
appendChild方法:在末尾添加,剪切黏贴
删除节点方法
removeChild方法:通过父节点删除
替换节点方法
replaceChild方法:通过父节点替换
六、innerHTML属性
作用一:获取文本对象
作用二:向标签里面设置内容