Detailed introduction to DOM in JavaScript (code example)

The content of this article is a detailed introduction (code example) about DOM in JavaScript. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

1. DOM: Document Object (document) model. Think of the entire HTML page as an upside-down tree. HTML is the root node of the tree, and head and body are the child nodes of the tree. The DOM model requires that each pair of tags in html be regarded as a node object for operation

2. The role of DOM:

JavaScript can change the content of the page All HTML elements

JavaScript can change all HTML attributes in the page
JavaScript can change all CSS styles in the page
JavaScript can react to all events in the page

3.DOM search for element node objects in the page:

3.1: Search for an element node object in the page by id
eg:

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2: Search by tag name The collection or array of element nodes in the page
eg:

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合，输出每个对象的内容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3: Search the collection or array of element nodes in the page through the class name
eg:

var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合，输出每个对象的内容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4: Through the name attribute Find the element node collection or array
eg:

var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合，输出每个对象的value属性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4. The content of the DOM operation node object (text content in the label, sub-label, sub-label text...):
4.1 : Get node content: node object.innerHTML
eg:

alert(ob1.innerHTML);

4.2: Modify node content: node object.innerHTML="new value";

eg:

ob1.innerHTML="哈哈";

4.3: Clear the node content:
eg:

ob1.innerHTML="";

5.DOM operates the text content of the node object (text in the label and text in the sub-label...):
5.1: Obtain the node text content (the text in the label and the text in the sub-label): node object.innerText
eg:

alert(ob1.innerText);

5.2: Modify the node text content (all content in the label is Modify): node object.innerText = "new value";
eg:

ob1.innerText="呵呵";

6.DOM operation node object properties:
6.1: Get the node object properties: node object.property name
eg:

 alert(ob2.src);

6.2: Modify the properties of the node object: node object.Attribute name = "value";
eg:

 ob2.src="img/img-2.jpg";

6.3: Delete the properties of the node object: node Object.removeAttribute("Attribute name");
eg:

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7.DOM operation node object style:
7.1: Set the style of the node object: Node object.style.Style name=" Style value";
eg:

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2: Get the style of the node object: node object.style.Style name
eg:

alert(ob1.style.color);

8.Event
8.1: onload: Page loading event.
8.2: onclick: Mouse click event.
8.3: onchange: change event.
8.4: onblur: Cursor leaves event.
8.5: onfocus: Get cursor event.
8.6: onmouseover: mouse passing event.
8.7: onmouseout: mouse leaves event.

9.DOM operation node object
9.1: Create node object:
9.1.1: Create label node object: document.createElement("label name");
eg:

//创建节点对象
var node1=document.createElement("p");

eg:

//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好<span>中国</span>";

9.1.2: Create a text object: document.createTextNode("text content");
eg:

//创建文本对象
var node1text=document.createTextNode("这是一个段落");

9.2: Add a node object: Node object.appendChild(child node);
eg:

//将节点对象添加body中
document.getElementById("d1").appendChild(node1);

//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h2 id="哈哈">哈哈</h2><p>呵呵呵</p>";

9.3: Delete node object: parent node object.removeChild(child node object);
eg:

//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象，只有谷歌，火狐
childNode.remove();

9.4: Copy the node object: node object.cloneNode(true);
eg:

//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制，false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5: Replace the child node in the element: parent node object.replaceChild(newnode,oldnode);

The above is the detailed content of Detailed introduction to DOM in JavaScript (code example). For more information, please follow other related articles on the PHP Chinese website!