Small knowledge, big challenge! This article is participating in the creation activity of “Essentials for Programmers”. This article has participated in the “Digitalstar Project” to win the creation gift package and challenge the creation incentive money.
In order to thank the nuggets readers for their support during this period of time, I put a private wechat on the homepage. If you need technical communication, you can directly add A Ken to communicate with me on wechat. Thank you for meeting me
Author: Please call me Ken Link: juejin.cn/user/109118… The copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.
🌊🌈
Part of the content and pictures of the article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the home page).
This blog is suitable for just contactJSAnd the friends who want to review after a long time.
🌊🌈
7.4_ Basic Node
What is a node
An HTML document can be thought of as a tree of nodes, and everything in a web page is a node (including elements, attributes, text, comments, and so on).
7.4.1_ What is a Node
All nodes in the HTML DOM tree are accessible through JavaScript, so you can manipulate elements in HTML in the same way you manipulate nodes.
In general, a node has at least three basic attributes: nodeType nodeType), nodeName (nodeName), and nodeValue (nodeValue).
- Element node, nodeType 1.
- Property node, nodeType is 2.
- Text node. NodeType is 3. Text nodes contain text, Spaces, line feeds, and so on.
In real development, node operations mainly operate on element nodes, which can be determined by the value of nodeType.
7.4.2_ Node Level
DOM treats AN HTML document as a tree structure. An HTML file can be regarded as a tree of nodes composed of all elements, and there are levels of division between each element node. The following is an example.
<! DOCTYPEHTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<a href="#">link</a>
<p>Paragraph...</p>
</body>
</html>
Copy the code
In the above code, DOM can be divided into tag nodes, text nodes and attribute nodes according to their different roles in HTML. The label node is also called the element node. Comments in HTML documents are individually called comment nodes.
The most common hierarchical relationship between nodes is the parent-child sibling relationship. Let’s take the < head>, < body>, and < HTML > nodes as examples.
- Root node: The < HTML > tag is the root node of the entire document, and there is only one.
- Parent node: Refers to the parent node of a node. For example, < HTML > elements are the parent nodes of < head> and < body>.
- Child node: Refers to the children of a node. For example, the < head> and < body> nodes are children of the < HTML > node.
- Sibling node: Two nodes belong to the same parent node. For example, < head> and < body> are siblings of each other.
After explaining the hierarchical relationship of various nodes, we will explain in detail the acquisition of nodes at various levels.
1. Obtain the parentNode obj.parentNode
_ in JavaScript, you can use the parentNode attribute to obtain the nearest parentNode of the current element, or return null if no parentNode is found. The syntax is obj.parentNode. Where obj is a DOM object that is acquired by methods that get elements, such as the getElementById() method.
Example: Shows how to get the parent node of the current element,
<! DOCTYPEHTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="demo">
<div class="box">
<span class="child">Span element</span>
</div>
</div>
<script>
var child = document.querySelector('.child');
console.log(child.parentNode);
</script>
</body>
</html>
Copy the code
In the above code, retrieve the SPAN element of class child via querySelector() and store it in the Child object. Outputs the nearest parent node (box) to the child element in the console.
2. Obtain the child node
Understand the following cases
_ In JavaScript, you can use either the childNodes attribute or the children attribute to get a collection of all the children of the current element.
(1) The childNodes property
The childNodes property retrieves a collection of all children of the current element, which is updated immediately.
Example: Shows how to get the current element child node,
<! DOCTYPEHTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<ul>
<li>I'm li</li>
<li>I'm li</li>
<li>I'm li</li>
<li>I'm li</li>
</ul>
<script>
// Get the method (API) provided by DOM
var ul = document.querySelector('ul');
var lis = ul.querySelector('li');
console.log(lis);
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
</script>
</body>
</html>
Copy the code
In the above code, an unordered list ul is defined. Test whether the API methods provided by the DOM can get all the Li elements. Get all child nodes (including text nodes and element nodes) of ul using nodes. Gets the node types of text and element nodes based on the nodeType attribute.
The childNodes property returns a collection of NodeList objects. The return value contains element nodes, text nodes, and other types of nodes.
If you want to get element nodes inside childNodes, you need to do something special. In the above code, write the following code to get the element node.
for(var i = 0; i < ul.childNodes.length; i++) {
if(ul.childNodes[i].nodeType === 1) {
console.log(ul.childNodes[i]); }}Copy the code
In the above code, ul.childNodes[I] is the element node.
Note that the childNodes attribute does not get text nodes in IE 6 to IE 8, but it does in IE 9 and later and in mainstream browsers. So childNodes is generally not recommended for actual development.
(2) Children attribute
Children is a readable property that returns all child element nodes. Children returns only the child element node, not the other nodes. This property is currently supported by all major browsers, and children is recommended for real-world development.
Example: Shows how to get the current element child node,
<! DOCTYPEHTML>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<ol>
<li>I am a li1</li>
<li>I am a li2</li>
<li>I am li3</li>
<li>I am a li4</li>
</ol>
<script>
var ul = document.querySelector('ol');
var lis = ul.querySelectorAll('li');
console.log(ul.children);
</script>
</body>
</html>
Copy the code
HTMLCollection(4) [li, li, li, li] is output in the console.
- Note: The _ childNodes attribute and the children attribute both retrieve the children of an element, but there are some differences between them. The former is used for node operations and returns a collection of NodeList objects. The latter is used for element operations and returns a collection of HTMLCollection objects.
(3) Get firstChild and lastChild
The firstChild and lastChild attributes, the former returning the firstChild, the latter returning the lastChild, or null if not found. Note that their return values include text nodes, element nodes, and so on.
(4) Get firstElementChild and lastElementChild
The firstElementChild and lastElementChild attributes, the former returning the first child node, the latter the last child node, or null if not found.
Note that these two properties have compatibility issues and are only supported in IE9.
In practice, firstChild and lastChild contain other nodes and are not easy to operate; FirstElementChild and lastElementChild have compatibility issues. How do you get the first or last child node? To solve compatibility problems, “obj.children [index]” is usually used in practical development to obtain child element nodes. The sample code is as follows.
obj.children[0];// Get the first child node
obj.children[obj.children.length - 1] // Get the last child node
Copy the code🌊🌈
A Ken HTML, CSS introduction guide (a)_HTML basics a Ken HTML, CSS introduction guide (b)_HTML page elements and attributes a Ken HTML, CSS introduction guide (c)_ text style attributes Ken HTML, CSS introduction guide (four)_CSS3 selector Ken HTML, CSS introduction guide (five)_CSS box model Ken HTML, CSS introduction guide (six)_CSS box model Ken HTML, CSS introduction guide (seven)_CSS box model Ken’s Getting Started with HTML and CSS (8)_CSS box model Ken’s Getting Started with HTML and CSS (9)_ Floating and Positioning Ken’s Getting Started with HTML and CSS (10)_ Floating and Positioning Ken’s getting Started with HTML and CSS (11)_ Floating and positioning Ken’s introduction to HTML and CSS (12)_ The application of forms The introduction to HTML and CSS (13)_ the application of forms (14)_ the application of forms the introduction to HTML and CSS (15)_ the application of forms A Ken HTML, CSS introduction guide (16) _ multimedia technology
Suggest collection 】 【 HTML dry share | challenge the shortest possible time to take you into the HTML (18) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (19) suggest collection 】 【 HTML dry share | challenge the shortest time take you into the HTML (20)
Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (a) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (2) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (3) the share | JS dry Recommended collection 】 challenge the shortest time take you into the JS (4) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (5) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (6) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (7) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (eight) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (nine) suggest collection 】 【 share | JS dry challenge the shortest time to take you into the JS (10) 【 share | JS dry goods Recommended collection 】 challenge the shortest time take you into the JS (11) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (12) suggest collection 】 【 share | JS dry challenge the shortest time take you into the JS (13) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (14) Suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (15) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (16) suggest collection 】 【 share | JS dry challenge the shortest possible time to take you into the JS (17)
🌊🌈 About postscript:
Thank you for reading, I hope to help you if there is a flaw in the blog, please leave a message in the comment area or add contact information in the home page of the personal introduction of private chat I thank every little partner generous advice
Original is not easy, “like” + “attention” thanks for your support ❤
Author: Please call me Ken Link: juejin.cn/post/700278… Source: Rare earth mining copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.