DOM学习笔记

DOM

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
var elem=parent.querySelector("selector")	通过css选择器查找一个元素
var elems=parent.querySelectorAll("selector")	通过css选择器查找多个元素

基本操作

1.读取属性值

1.先获得属性节点对象，再获得节点对象的值:
var attrNode =elem.attributes[下标/属性名];
var attrNode=elem.getAttributeNode(属性名)
attrNode.value-属性值
2.直接获得属性值
var value= elem.getAttribute('属性名");

2.修改属性值:

​ elem.setAttribute( "属性名", value);

3.判断是否包含指定属性:

	var bool=elem.hasAttribute("属性名")
	element.hasAttribute(属性名')
	//true或false

4.移除属性:

elem.removeAttribute("属性名")

修改样式:

elem.style.属性名
强调:
属性名:去横线,变驼峰

添加元素的步骤

1.创建空元素:

var elem=document.createElement( "元素名")

2.设置关键属性

3.将元素添加到DOM树

parentNode.appendChild(childNode)
可用于将为一个父元素追加最后一个子节点

parentNode.insertBefore(newChild, existingChild)
用于在父元素中的指定子节点之前添加一个新的子节点

总结

查找元素

一、document获取元素

1. 通过ID获取
   document.getElementById()

2. 通过标签名获取
   document.getElementsByTagName()

3. 通过标签中的属性name获取

   document.getElementsByName()

4. 通过类名获取
   document.getElementsByClassname()

5. 通过任意CSS选择符获取
   document.querySelector()

   document.querySelectorAll()

二、通过已知节点遍历节点树

节点常用的4个属性
1. nodeName 获取节点名，只能读
`2. nodeValue 获取节点值，即节点的文本内容；

节点都有一个常用的方法：hasChildNodes()
用于判断节点下还有没有子节点，有返回true，没有返回false
node.hasChildNodes();

如何通过已知节点遍历节点树

1. 获取已知节点的父节点
   node.parentNode;
   一般父节点上还有父节点，最顶端是document，再往上是null
2. 获取子节点们
   node.childNodes ;
3. 获取首个、第一个子节点
   node.firstChild;
4. 获取最后一个子节点
   node.lastChild;
5. 获取下一个兄弟节点
   node.nextSibling;
6. 获取前一个即上一个兄弟节点
   node.previousSibling;
   注：node代表已知节点

三、基于当前元素节点遍历元素节点树

1. 获取当前元素的父元素节点，
   ele.parentElement
2. 获取元素节点的子元素节点
   ele.children
3. 获取第一个子元素节点
   ele.firstElementChild
4. 获取最后一个子元素节点
   ele.lastElementChild
5. 返回下一个兄弟元素节点
   ele.nextElementSibling
6. 返回前一个兄弟元素节点
   ele.previousElementSibling

增加节点

一、创建节点

1. 创建元素节点
   document.createElement("div")；//创建div标签
2. 创建文本节点
   document.createTextNode("aaa");//创建内容为aaa的文本节点返回
3. 创建注释节点
   document.createComment("content") //创建一个注释节点返回
4. 创建属性节点
   document.createAttribute()
5. 创建一个 documentFragment 节点:
   或者说是用来创建文档碎片节点,用来创建一个虚拟的节点对象
   document.createDocumentFragment()

二、插入节点

1. 子节点末尾追加新子节点
   oldNode.appendChild(newNode)
2. 已知节点前插入新节点
   insertBefore(newNode,oldNode)
   第一个参数表示：要添加的新节点
   第二个参数表示：已知子节点

删除节点

1. ele.removeChild(childNode);
   从子节点列表中删除某个节点；如果删除成功，返回被删除的节点，如果失败，则返回 null。
2. ele.remove()
   移除自身，包括所有子节点。相当于销毁整个节点

替换子节点

parent.replaceChild(new,origin)
将某一个子节点替换为另一个，第一个参数：要插入的新元素，第二个：将要被替换的老元素

元素节点的常用属性和方法：

1. 能获取或设置元素节点里面的HTML内容
   innerHTML

2. 能获取或设置元素节点里面的文本值
   innerText

3. 获取指定属性名对应的属性
   getAttribute(属性名)

4. 创建或者改变元素节点对应的属性
   setAttribute(属性名，属性值)

5. 删除元素中指定属性
   removeAttribute(属性名)