Home > Article > Web Front-end > Summary of native JavaScript operations on dom nodes
When developing JavaScript programs, the most commonly used one is the operation of dom. Today we will summarize the operations of native JavaScript on dom node. Everyone If you don’t fully understand JavaScript’s operation of DOM nodes, you can take a look.
1. Get the element node
Get a single element: document.getElementById(); document.querySelector() //Get the first element;
Get multiple elements (you can select a single element by subscript and return a collection of elements, equivalent to an array):
document.getElementsByTagName(); document.getElementsByName(); document.getElementsByClassName();// 动态,实时的 document.querySelectorAll();// 查找速度比上面的块 //是静态的,非实时的,
Create Element, text
document.createElement(“p”); document.createNode(“hello”) //创建文件节点。
Insert into document
parentNode.appendChild(newNode), parentNode.insertBefore(newNode,positionNode);
ele.setAttribute(name,value)//设置属性 ele.getAttribute(name)//获取元素的属性 ele.removeAttribute(name)//移除属性
Node removal
ele.remove(),parentNode.removeChild(childNode)
Replace child element
parentNode.replaceChild(newNode,oldNode)
Copy element
ele.cloneNode(boolean);// boolean为true, 深复制。
2. Get child elements, parent elements, sibling elements
ele.previousElementSibling;//上一个兄弟元素 ele.parentNode;//父元素 ele.children//子元素 ele.nextElementSibling//下一个兄弟元素
More about node operations:
##Summary of DOM node operation methods in jQuery
The above is the detailed content of Summary of native JavaScript operations on dom nodes. For more information, please follow other related articles on the PHP Chinese website!