总结-DOM的操作方法和知识点

DOM

(1) 查找节点

查找单个节点时 //返回节点，未找到返回null

查找多个节点时 //返回节点对象集合，未找到返回[ ];

document.getElementById(“id名称”)；

node.getElementsByClassName(“class名称”)；

node.getElementsByTagName(“标签名”)；

node.getElementsByName(“name属性名”)//主要用于表单元素的查找；

//get...sBy..返回动态集合，单次查找效率高；

document.querySelector(“选择器”)；//返回符合选择器要求的一个节点对象;

document.querySelectorAll(“选择器”)；

//返回静态集合，集合中实际存储了每个节点的具体数据，反复访问集合，不会导致重新查 找DOM树，多级查找才能找到目标时，首选使用querySelector

(2) 操作节点属性

   核心DOM

访问属性值：node.getAttribute(“属性名”)   //返回属性值(字符串)

访问属性节点对象：node.getAttributeNode(“属性名”)

     elem.attributes[i/属性名] //返回属性节点对象，

修改：node.setAttribute(“属性名”，”属性值”)

移除元素的某属性：elem.removeAttribute(“属性名”)

判断是否包含某属性：elem.hasAttribute(“属性名”) //返回布尔值

   HTML DOM（使用对 对象的操作）

访问：node.属性名 //以对象属性的方式进行访问，返回属性值(字符串)

修改：node.属性名=“属性值” //以赋值的方式进行修改

   HTML5(定义自定义属性)：

定义：data-属性名=”值”； //在html标签中定义

访问：dataset.属性名 //在js中访问

(3)操作节点内容

访问：node.innerHTML

返回节点下的所有内容，包换HTML标签；

修改：node.innerHTML=”HTML片段”

node.innerText //（存在浏览器兼容性问题）

 node.textContent

 

(4)操作节点的值

Input.value

Input.value = ”属性值“ //针对于表单元素value属性的查找和修改

 

(5)操作节点样式

node.style.样式名 = 样式值; //可以读取 或 修改(赋值) [只能操作内联样式]

getComputedStyle().样式名 //只读，获得元素计算后的样式

node.className = “newClassName” //用改变class名来匹配不同的css样式

(6)遍历节点

 

节点树（受文本节点干扰）

元素树（存在兼容性问题 ie9+）

node.parentNode

node.parentElement

 

node.nextSibling

node.nextElementSibling

 

node.previousSibling

node.previousElementSibling

 

node.childNodes  动态集合

node.children（不存在兼容性问题）动态集合

 

node.firstChild

node.firstElementChild

 

node.lastChild

node.lastElementChild

 

(7)添加节点

  创建：

var frag = document.vareatDocumentFragment(); //内存中创建文档片段，暂时管理子元素；

var newChild = document.createElement(“标签名”); //新建HTML标签

var newText = document.createTextNode(“文本内容”); //新建文本节点

  追加：

parent.appendChild(newChild); //新元素追加为指定父元素的最后一个子元素

parent.insertBefore(newChild,oldElem) //新元素追加到父元素的指定子元素之前

 

(8)删除节点

parent.removeChild(childNode) //只能通过父元素对子元素进行移除操作    

(9)替换节点

parent.replaceChild(newChild, oldChild)

(10)克隆节点

cloneNode(true || false);　 //复制某个节点  参数：是否复制节点的事件处理函数，默认false

 

(11)节点对象（Node）的三大属性

1.  node.nodeName //返回节点名（字符串类型）

根节点 document   返回   #document

元素节点 返回 “全大写的标签名”

属性节点 返回 “属性名”

文本节点    返回   “#text”

2.  node.nodeType //返回节点类型（数值类型）

根节点document: 9

元素节点: 1

属性节点: 2

文本节点: 3

...

3.  node.nodeValue //返回节点值

根节点document   返回    null 失效

元素节点    返回    null 失效

属性节点  返回 “属性值”

文本节点  返回 “文本内容”