3.1 获取
3.1.1 DOM获取元素
-
通过id名:document.getElementById(“id名”):具体的实际的标签,获取的时候有就是有,没有就是没有
-
通过TagName:
- document.getElementsByTagName(“标签名”):整个文档中,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标签
- 父元素.getElementsByTagName(“标签名”):父元素中的,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标签
-
通过ClassName:
- document.getElementsByClassName(“类名”):整个文档中,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标签
- 父元素.getElementsByClassName(“类名”):父元素中的,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标签
-
通过选择器获取(ie8+)
-
document.querySelector(“css选择器”)
-
document.querySelectorAll(“css选择器”)
//1.通过选择器获取:静态获取,获取的时候有多少就是多少,后期添加都获取不到 //document.querySelector("选择器"):获取选择器选中标签中的第一个元素 var oUl = document.querySelector(".list"); console.log(oUls); //document.querySelectorAll("选择器"):获取选择器选中的所有标签 节点列表 var oUls = document.querySelectorAll(".list"); console.log(oUls); console.log(oUls.length); var oLis = document.querySelectorAll("#list1 li"); console.log(oLis); oUl.innerHTML += "<li>吃饭</li>";
-
3.1.2 获取子节点
- 非标准属性:父节点.children(一般用这个)
//2.获取子节点
//非标准属性:父节点.children(一般用这个)
var childs = oUl.children;
console.log(childs);//HTMLCollection(4)
- 标准属性:父节点.childNodes
//标准属性:父节点.childNodes
var childs = oUl.childNodes;
console.log(childs); //NodeList(9)
注意:节点并不是单指标签
节点包括:标签节点,文本节点(空格,回车,文字),属性节点–2,注释节点 。。。。。
-
基本属性
-
nodeType:获取节点类型
-
nodeName:获取节点名称
-
nodeValue:操作文本节点内容
//4.节点属性 nodeType,nodeName,nodeValue console.log(childs[0].nodeType); //文本--3 console.log(childs[1].nodeType); //标签--1 console.log(childs[3].nodeType); //注释--8 //属性--2 console.log(childs[0].nodeName); //文本--#text console.log(childs[1].nodeName); //标签--Li console.log(childs[3].nodeName); //注释--#comment //nodeValue是操作文本节点 childs[0].nodeValue = "吃饭吗?";
-
3.1.3 获取父元素
- 获取直接父元素:子元素.parentNode
//2.获取父节点(直接父元素) 子节点.parentNode
var p = oSpan.parentNode;
console.log(p);
- 获取定位父元素:子元素.offsetParent,如果没有定位父元素获取到body
//3.获取定位父节点 子节点.offsetParent,没有定位父元素获取到body
var oO = oSpan.offsetParent; //
console.log(oO);
3.1.4 获取兄弟节点
- 首节点:父节点.firstElementChild || 父节点.firstChild
- 尾节点:父节点.lastElementChild || 父节点.lastChild
- 上一个兄弟:参考节点.previousElementSibling ||参考节点.previousSibling
- 下一个兄弟:参考节点.nextElementSibling ||参考节点.nextSibling
3.2 添加节点
3.2.1 创建节点
-
创建标签节点:document.createElement(“标签名”);
-
创建文本节点:document.createTextNode(“文本内容”)
//2.创建节点: document.createElement("标签名")
var cLi = document.createElement("li");
//cLi.innerHTML = "完成一个项目";
//3.创建文本节点:document.createTextNode("文本内容")
var text = document.createTextNode("完成两个项目");
//把文本添加到标签中
cLi.appendChild(text);
3.2.2 添加节点
- 追加 在父元素的末尾添加 父节点.appendChild(子节点)
//2.创建节点: document.createElement("标签名")
var cLi = document.createElement("li");
cLi.innerHTML = "完成一个项目";
//1.追加:在父元素的末尾添加 父节点.appendChild(子节点)
oUl.appendChild(cLi);
- 在某个元素之前添加: 父节点.insertBefore(newChild,refChild)
//4.在某个元素之前添加: 父节点.insertBefore(newChild,refChild)
var iLi = document.createElement("li");
iLi.innerHTML = "不吃饭";
oUl.insertBefore(iLi,oLi[2]);
注意:添加一个已经存在的标签,发生物理位移
3.3删除节点
-
删除自身:标签.remove() ie不兼容
-
删除子节点:标签.removeChild(子节点)
var oUl = document.getElementsByTagName("ul")[0];
//1.删除标签本身 标签.remove(); 不建议使用,ie不兼容
//oUl.remove();
//2.删除子元素: 父元素.removeChild(子节点)
oUl.removeChild(oUl.children[2]);
3.4 复制与替换
- 替换:父节点.replaceChilde(newChild,refChild)
//替换:父节点.replaceChild(newChild,refChild)
var cDiv = document.createElement("div");
cDiv.innerHTML = "我是一个小可爱";
document.body.replaceChild(cDiv,oDiv)
- 复制:被复制的节点.cloneNode(true)
//复制节点:被复制的节点.cloneNode(boolean)
//boolean 默认是false:只复制标签没有内容 true:复制标签和内容
var cloneD = oDiv.cloneNode(true);
document.body.appendChild(cloneD);
3.5 操作属性节点
-
操作属性
- 获取:var 变量 = 标签.属性名
- 设置:标签.属性名 = 属性值
-
DOM操作属性节点
- 获取:标签.getAttribute(“属性名”)
- 设置:标签.setAttribute(“属性名”,“属性值”)
- 删除:标签.removeAttribute(“属性名”)
//1.获取id
console.log(oDiv.getAttribute("id"));;
console.log(oDiv.getAttribute("class"));
//2.设置
oDiv.setAttribute("class","active");
//3.删除
oDiv.removeAttribute("id");
//区别:可以获取直接写在行内的自定义属性,删除某个指定的属性
console.log(oDiv.index); //undefined 获取不到直接写在标签上自定义属性
console.log(oDiv.getAttribute("index")); //0