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 失效
属性节点 返回 “属性值”
文本节点 返回 “文本内容”