English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In the HTML DOM (Document Object Model), each part is a node.
A node is the most basic component of the DOM structure, and each HTML tag is a node in the DOM structure.
The document is a... Document node.
All HTML elements are... Element nodes
All HTML attributes are... Attribute nodes
Text inserted into HTML elements is... Text nodes
Comments are... Comment nodes.
The most basic node type is the Node type, and all other types inherit from Node. DOM operations are often the most costly part of JavaScript, so NodeList-related issues are the most common. Note: NodeList is 'dynamic', which means that a query is run each time the NodeList object is accessed. Although this increases the overhead, it ensures that all newly added nodes can be accessed in the NodeList.
All element nodes have common properties and methods. Let's take a detailed look at them:
Let's first look at the commonly used general properties
1 element.id : Sets or returns the id of the element.
2 element.innerHTML : Sets or returns the content of the element, which can include subtags and content within the node
3 element.innerText : Sets or returns the content of the element, excluding subtags and content within the node
4 element.className : Sets or returns the class name of the element
5 element.nodeName : Returns the uppercase tag name of the current node
6 element.nodeType : Returns the node type of the current node,1Represents an element node 2Represents an attribute node...
7 element.nodeValue : Returns the value of the node, which is null for element nodes
8 element.childNodes : Returns a NodeList object of the child nodes of the element. NodeList is similar to an array, has a length property, and can use brackets [index] to access the value at a specific index (or use the item(index) method). However, NodeList is not an array.
9 element.firstChild/element.lastChild : Returns the first child of the element/The last child node (including comment nodes and text nodes)
10 element.parentNode : Returns the parent node of the current node
11 element.previousSibling : Returns the previous node at the same level as the current node (including comment nodes and text nodes)
12 element.nextSibling : Returns the next node at the same level as the current node (including comment nodes and text nodes)
13 element.chileElementCount : Returns the number of child elements (excluding text nodes and comment nodes)
14 element.firstElementChild /lastElementChild Returns the first one/Last child element (excluding text nodes and comment nodes)
15 element.previousElementSibling/nextElementSibling Returns the previous one/Next sibling element (excluding text nodes and comment nodes)
16 element.clientHeight/clientWidth Returns the visible height of the content/Width (excluding border, margin, or scrollbar)
17 element.offsetHeight/offsetWidth /offsetLeft/offset/Top Returns the height of the element/Width/Left offset relative to the parent element/Right offset (including border and padding, excluding margin)
18 element.style Sets or returns the style attributes of the element, for example: element.style.backgroundColor Note, unlike CSS, the properties of style should remove the hyphen, and the second word should start with a capital letter
19 element.tagName Returns the tag name of the element (in uppercase)
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px solid rebeccapurple;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge">
Please select a martial art：<br/>
<input type="radio" name="gongfa" value="jysg">Nine Yang Miracle Skill<br/>
<input type="radio" name="gongfa" value="qkdny">Heaven and Earth Great Transfer<br/>
<input type="radio" name="gongfa" value="khbd">Sunflower Classic<br/>
<input type="radio" name="gongfa" value="xxdf">Absorption Skill<br/>
</form>
<p>Think twice, young master!!!</p>!<--Annotation Tag-->
<p>Recommended Kung Fu Practices</p>-->Kuihua Baodian</p>
<script>
//Add the JavaScript demonstration code here
var a=document.getElementById('first_form'),
b = document.getElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.log(a.nodeName);
console.log(a.nodeType);
console.log(a.nodeValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>
</body>
</html>
Browser display result：
There are also some exclusive attributes
Exclusive attributes refer to those attributes that are exclusive to a certain type of tag. For example, the <a> tag has href and target attributes. The <img> tag has src attribute; the <form> tag has entype and action attributes……
a_element.href Returns the hyperlink pointed to by the current node
Let's take a look at some commonly used general methods:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge">
Please select a martial art：<br/>
<input type="radio" name="gongfa" value="jysg">Nine Yang Miracle Skill<br/>
<input type="radio" name="gongfa" value="qkdny">Heaven and Earth Great Transfer<br/>
<input type="radio" name="gongfa" value="khbd">Sunflower Classic<br/>
<input type="radio" name="gongfa" value="xxdf">Absorption Skill<br/>
</form>
<p>Think twice, young master!!!</p>
<script>
//Add the JavaScript demonstration code here
</script>
</body>
</html>
(All the following JavaScript demonstration code is based on the example HTML code in this document as the experimental object)
1 element.appendChild(nodeName) Add a new child node to the element, as the last child node, and return the child node. To add a new element to the HTML DOM, you must first create the element and then append it to an existing element.
js demonstration code:
var a=document.getElementById('first_form');
var textnode=document.createTextNode("Choose carefully");
a.appendChild(textnode)
2 element.getAttribute(para) Returns the specified attribute value of the element node.
js demonstration code:
var a=document.getElementById('first_form');
console.log(a.getAttribute('name')) //Console output the value of name
3 element.getAttributeNode(para) Returns the specified attribute node.
js demonstration code:
var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name')) //Console output name attribute node
4 element.getElementsByTagName(para) Returns a collection of all child elements with the specified tag name.
js demonstration code:
var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input')) //Console output
5 element.hasAttribute(para) If the element has the specified attribute, it returns true; otherwise, it returns false.
js demonstration code:
var a=document.getElementById('first_form');
console.log(a.hasAttribute('name')) //Console output
6 element.insertBefore(insertNode,appointedNode) Insert a new node before the specified existing child node.
js demonstration code:
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('Tianma流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);
7 element.removeAttribute(); Remove the specified attribute from the element.
js example code:
var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))
8 element.removeChild() Remove child nodes from the element. The removed nodes are no longer in the document tree, but they are still in memory and can be referenced at any time.
js example code:
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3]);
9 element.replaceChild(newNode,replaceNode) Replace the specified node with a new node.
10 element.setAttribute(attrName,attrValue) Set or change the specified attribute to the specified value.
js example code:
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)
11 element.setAttributeNode() Modify the specified attribute node
js example code:
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)
12 nodelist.item() Returns the node at the specified index in the NodeList.
js example code:
var a=document.getElementsByTagName('input')
console.log(a.item(2))
That's all for the detailed explanation of the properties and methods of the DOM elements in the JavaScript basics brought to you by the editor. Hope everyone will support and cheer for the tutorial~