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.

🌊🌈

NextSibling, previousSibling, nextElementSibling, previousElementSibling

In JavaScript, you can use the nextSibling attribute to get the nextSibling and the previousSibling attribute to get the last sibling. Their return values include element nodes, text nodes, and so on. If it cannot be found, null is returned.

If you want to get a sibling element node, you can use nextElementSibling to return the next sibling node of the current element and the previousElementSibling attribute to return the last sibling node of the current element. Returns null if it cannot be found.

Note that these two properties have compatibility issues and are only supported in IE9.

In actual development, the return value of nextSibling and previousSibling attributes both contain other nodes, making it inconvenient to operate, while nextElementSibing and previousElementSibling have compatibility issues. In order to solve compatibility problems, encapsulation functions are usually used to deal with compatibility in actual development.

Example code is as follows:

<! DOCTYPEHTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>test</title>
	</head>
	<body>
		
		<script>
			
			function getNextElementSibling(element) {
				var el = element;
				while (el = el.nextSibling) {
					if(el.nodeType === 1) {
						returnel; }}return null;
			}
			
		</script>
		
	</body>
</html>
Copy the code

In the above code, we define the getNextElementSibling() function with an element argument. In the while loop, judging by the if condition, if the nodeType attribute value is equal to 1, the nodeType obtained is the element node.

7.4.3_[Case] Drop-down menu

Pull-down menus are widely used in website. for example, when the mouse pointer passes through the pull-down menu, the contents in the current drop-down box will be displayed and other contents of the drop-down menu will be hidden. The specific implementation steps are as follows.

(1) Write HTML code to complete the page layout.

<body>
<ul class="nav">
<li>
<a href="#">weibo</a>
<ul>
<li><a href="">Direct messages</a></li>
<li><a href="">comments</a></li>
<li><a href="">@ I</a></li>
</u1>
</li>. (omitted 3 Li)</u1>
</body>
Copy the code

The above code adopts the structure layout of UL and LI. There are multiple drop-down menus li under UL, and each Ii has a list of A and UL, where A is the label name and UL is the drop-down content. When the mouse pointer passes over Li, UL in Li is displayed. When the mouse pointer moves away from LI, ul in Li is hidden.

(2) Display the current drop-down list content when the mouse pointer passes, the example code is as follows.

<script>
// 1. Get the element
var nav = document.querySelector('.nav');
var lis = nav.children;
// 2. Register mouse pointer over and mouse pointer off events
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {
this.children[1].style.display = 'block'; // ul is the second child of li
};
lis[i].onmouseout = function ()
this.children[1].style.display = 'none';
};
}
</script>
Copy the code

In the above code, lines 3 and 4 fetch the four Li’s under the class name nav. Lines 6 to 13 register events using a for loop, where lines 7 to 9 set the display of ul, the second child of the current LI, when the mouse pointer passes. When the mouse pointer goes away, hide the content of ul, the second child of the current LI.

7.5_ Node Operations

7.5.1_ Creating a Node

After obtaining the node of the element, you can also use the method provided by DOM to add the node, such as creating a Li element node, creating a text node for the Li element node, etc.

In the DOM, the documentcreateElement(‘ tagName ‘) method is used to create the HTML element specified by tagName. Because these elements do not exist in the original, they are dynamically generated according to the actual development requirements, so they are also called dynamically created element nodes.

There are three common ways to create element nodes dynamically, as follows.

( 1 ) document.write()

Document.write () creates the element, which causes the page to be redrawn if the page document flow has finished loading.

( 2 ) element.innerHTML

Element. innerHTML writes content to a DOM node without causing the page to be completely redrawn.

( 3 ) document.createElement()

Document.createelement () is slightly less efficient when creating multiple elements, but the structure is clearer.

🌊🌈

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 time to take you into the JS (17) 【 share | JS dry goods Challenge the shortest time to take you into JS (18)

🌊🌈 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 ❤