DOM manipulation can be said to be very common in JS. The realization of many small functions of web pages, such as the addition and deletion of some elements, can be realized by JS. So what do we need to know in the DOM to implement some functions? Today's article will briefly take you into the door of DOM manipulation in JS! !
1. Nodes of the DOM tree
1. DOM nodes are divided into three categories: element nodes (label nodes), attribute nodes and text nodes.
Both attribute nodes and text nodes are children of element nodes. Therefore, when operating, you need to select the element node first, and then modify the attributes and text.
【View element node】
1. Use the getElement series of methods:
The specific HTML code is as follows:
// View element attributes by ID
var li = document.getElementById("first" );
// View element attributes by class name
var lis1 = document.getElementsByClassName("cls" );
// View element attributes by name
var lis2 = document.getElementsByName("name" );
// View element attributes by tag name
var lis3 = document.getElementsByTagName("li");
Precautions:
① The ID cannot be the same name. If the ID is repeated, only the first one can be taken.
② When getting an element node, you must wait until the DOM tree is loaded before getting it.
Two processing methods: a. Write JS at the end of the document;
b. Write the code into the window.onload function;
③ The data obtained through the getElements series is in an array format, and each element must be obtained during the operation before the operation can be performed, and the array cannot be operated directly.
document.getElementsByTagName("li")[0].click = function(){}
④ In this series of methods, you can also select a DOM node first, and select the desired node from the selected DOM nodes:
document.getElementById("div1").getElementsByTagName("li");
[Through the querySelector series method]
① Pass in a selector name and return the first found element. Typically used to find IDs:
var dq1 = document.querySelector("#id");
② Pass in a selector name and return all the elements found, no matter how many are found, they will be returned in array format. This method is more versatile and can be accurately found regardless of any attribute.
var dqs1 = document.querySelectorAll("#div1 li");
【View\Set Property Node】
1. View the attribute node: .getAttribute("Attribute name");
2. Set the attribute node: .setAttribute("attribute name", "attribute value");
Note: .setAttribute() will have compatibility problems in older versions of IE, you can use the . symbol instead.
[Multiple ways for JS to modify CSS]
1. Use setAttribute to set class and style.
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
2、使用.className添加一个class选择器。
document.getElementById("first").className = "class1";
3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
document.getElementById("first").style.fontSize = "18px";
4、 使用.style 或 .style.cssText 添加一串行级样式：
// IE不兼容
document.getElementById("first").style = "color:red;";
//所有浏览器兼容
document.getElementById("first").style.cssText = "color:red;";
【查看/设置文本节点】
1、.innerHTML: 取到或设置一个节点中的HTML代码。
2、.innerText: 取到或设置一个节点中的文本，不能设置HTML代码。
二、层次节点操作
1. .childNodes： 获取当前节点的所有子节点（包括元素节点和文本节点）。
.children： 获取当前节点的所有元素子节点（不包含文本节点）。
2. .parentNode: 获取当前节点的父节点。
3. .firstChild： 获取第一个子节点，包括回车等文本节点；
.firstElementChild： 获取第一个元素节点。 不含文本节点；
.lastChild： 获取最后一个子节点，包括回车等文本节点；
.lastElementChild： 获取最后一个子节点，不含文本节点；
4. .previousSibling： 获取当前节点的前一个兄弟节点，包括文本节点；
.previousElementSibling： 获取当前节点的前一个元素兄弟节点；
.nextSibling：获取当前节点的后一个兄弟节点，包括文本节点；
.nextElementSibling：获取当前节点的后一个元素兄弟节点；
5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。
【创建并新增节点】
1. document.createElement("标签名")： 创建一个新节点，并将创建的新节点返回。
需要配合.setAttribute()为新节点设置属性。
2. 父节点.insertBefore(新节点,目标节点)： 在父节点中，将新节点插入到目标节点之前。
父节点.appendChild(新节点)： 在父节点的内部最后，插入一个新节点。
3. 源节点.cloneNode(true)： 克隆一个节点。
传入true表示克隆源节点以及源节点的所有子节点；
传入false或不传，表示只克隆当前节点，而不克隆子节点。
【删除、替换节点】
1. 父节点.removeChild(子节点)： 从父节点中，删除指定子节点。
2. 父节点.replaceChild(新节点,老节点)： 从父节点中，用新节点替换老节点。