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)；

Attribute operation

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!