Get parent and sibling nodes.
Through a specific node, the following three properties are called to operate on parent and sibling nodes.
- parentNode property to get the parent node of the current node.
- previousSibling property to get the previous sibling node of the current node.
- When the previousSibling attribute is used to remove the previous sibling node of an element node, if the previous node is blank text, the blank text node will be returned instead of the sibling node. Instead of using the previousElementSibling attribute, the previousElementSibling attribute does not return blank text as a sibling node. However, the latter does not support the first version of ie8 and is not recommended!
- nextSibling property to get the next sibling node of the current node.
- Similarly, when the next sibling node is obtained, the nextSibling attribute returns a blank text node, which can be replaced by the nextElementSibling attribute. However, the latter does not support the first version of ie8 and is not recommended!
In this code, a constructor is used to bind click events to each button, which saves time for writing duplicate code. The constructor can be used in previous DOM queries and DOM queries (1) to bind click events, but when binding, pay attention to the id value of the button when the first argument is passed in, which is a string. Delivery without quotation marks will result in errors, which I often make.
The code for the exercise and the corresponding explanations are as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/dom.css" />
<title>Document</title>
<script type="text/javascript">
/*
Defines a function that binds click events to specified elements
- idStr,The id property value representing the object to bind the click response function
- fun,A callback function that represents an event and is triggered when an element is clicked
*/
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
/*
Set the value property value of #username
Returns the text value of #bj
*/
// //7. Get the parent node with id bj
// //Get the element with id btn7
// var btn7 = document.getElementById("btn7");
// //Bind click events for button 7
// btn7.onclick = function(){
// var bj = document.getElementById("bj");
// console.log(bj.parentNode);
// };
myClick("btn7",function(){//Note: When you pass an argument, the first parameter is a string. To quote it, you will get an error if you do not quote it
var bj = document.getElementById("bj");
console.log(bj.parentNode);
});
// //8. Get sibling nodes whose id is android
// //Get the previous sibling node whose id is android
// var btn8 = document.getElementById("btn8");
// btn8.onclick = function(){
// var android = document.getElementById("android");
// //console.log(android.innerHTML);
// //console.log(android.previousSibling);// Get the previous sibling node (returns a blank text node)
// console.log(android.previousElementSibling);// (No blank text node is returned)
// //console.log(android.nextSibling);// Get the next sibling node (returns a blank text node)
// console.log(android.nextElementSibling);
// };
myClick("btn8",abrother);
function abrother(){
var brother = document.getElementById("android");
console.log(brother.nextElementSibling);
}
//Gets the value property value with id username
myClick("btn9",uv);
function uv(){
var username = document.getElementById("username");
alert(username.value);//What you get in a text box is what you fill out in the text box in real time.
}
//Set the value property value with id username
myClick("btn10",um);
function um(){
var username = document.getElementById("username");
username.value = "Li Si";//Set the value property value of username, and the contents of the input box will change as you set it
}
//Returns text content with id bj
myClick("btn11",utext);
function utext(){
var bj = document.getElementById("bj");
// console.log(bj.innerHTML);
//Get the text node with id bj,
console.log(bj.firstChild.nodeValue);//Use the nodeValue property to get text content
}
};
</script>
</head>
<body>
<div class="zong">
<div class="zong1">
<div class="one">
<p>Which province do you like?</p>
<ul id="city">
<li id="bj">Beijing</li>
<li id="shanghai">Shanghai</li>
<li id="dongjing">Tokyo</li>
<li id="shouer">Seoul</li>
</ul>
<p>Which game do you like?</p>
<ul id="game">
<li>Red Police</li>
<li>Fact</li>
<li>The ultimate flying car</li>
<li>World of Warcraft</li>
</ul>
<p>What is the operating system of your mobile phone?</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class="two">
<p>gender:Male<input class="xingbie" type="radio" name="gender">
feMale<input class="xingbie" type="radio" name="gender" /></p>
name:<input type="text" id="username" value="Xiao Ming"/>
</div>
</div>
</div>
<div class="zong2">
<div class="three">
<button id="btn1">lookup id by bj Node</button>
<button id="btn2">Find All li node</button>
<button id="btn3">lookup name = gender All Nodes</button>
<button id="btn4">lookup id by city All below li node</button>
<button id="btn5">Return id by city All child nodes</button>
<button id="btn6">Return id by phone First child node</button>
<button id="btn7">Return id by bj Parent node of</button>
<button id="btn8">Return id by android The first sibling node</button>
<button id="btn9">Return id by username Of value Attribute Value</button>
<button id="btn10">Set up id by username Of value Attribute Value</button>
<button id="btn11">Return id by bj Text value</button>
</div>
</div>
</body>
</html>
The innerText attribute, which gets the text content inside the element, is similar to the innerHTML attribute except that it automatically removes the html tags
When getting the contents of a text node, if the node has only one text child node in a year, it can be obtained directly using the firstChild attribute.
Another way is to use the nodeValue value of the text node to get the content of the text node.
Again, when getting the corresponding content of a node, you can get it with the corresponding properties of the node, which are the following properties of each node:
