1. Get the element
getElementById() method, get the element through the id of the element, accept a parameter to get the id of the element, if the id does not exist, return null
Be careful not to let the name of the form element and The IDs of other elements are the same. IE browsers below IE8 use this method to obtain the element through the name attribute of the element
Take the following element as an example
Here is The div content with the id "myDiv"
var document.getElementById("myDiv"); //"myDiv" is case-sensitive and gets the reference of the
element
getElementsByTagName() method, through the element Get the element's tag name, accept one parameter, which is to get the tag name of the element, and return a NodeList containing 0 or more
var images = document.getElementsByTagName("img"); //Get all
![]()
elements in the page
alert(images.length) ; //The number of images
alert(images[0].src); //The src of the first image element
alert(images.item(0).src); //Same as above
getElementsByName() method, obtains elements through the name attribute of the element. It accepts one parameter to obtain the name attribute of the element. It is often used to obtain radio buttons
var radios = document.getElementsByName("color "); //Get all radio buttons with name="color"
2. Get element child nodes or element child nodes and their descendant nodes
- Project 1< ;/li>
- Project Two
- Project Three
Note : IE thinks that the
element has 3 child nodes, which are 3 elements respectively. Other browsers will think that there are 7 child nodes, including 3 elements and 4 text nodes. If is in a line:
- Project one
- Project two
- Project three
Any browser thinks there are 3 child nodes
Get the child nodes of the element:
var ul = document.getElementById("myList");
for (var i=0,len = ul.childNodes.length; i < len ; i ) {
if ( ul.childNodes.length[i].nodeType == 1) { //nodeType == 1 indicates that the node is an element node, not a text node
//Perform certain operations
}
}
Get the element’s child nodes and its descendant nodes:
var ul = document.getElementById("myList");
var items = ul.getElementsByTagName("li"); //li in li will also be obtained
3 Find other nodes through the attributes of the node
nextSibling attribute points to the next sibling node of the current node
previousSibling attribute points to the previous sibling node of the current node
firstChild attribute points to the first child node, lastChild Points to the last child node
childNodes saves all child nodes (actually NodeList objects), which can be accessed through the square bracket method such as someNode.childNodes[0] to access the first child node
The parentNode attribute points to the parent node
The node relationship is as follows:
NodeList is an array object, we can convert it into an array, the function is as follows
function converToArray (nodes) {
var arrary = null;
try {
array = Array.prototype.slice.call(nodes,0);
}
catch (ex) {
array = new Array();
for (var i=0,len=nodes.length ; iarray.push (nodes[i]);
}
}
return array;
}
var div = document.getElementById("side");
alert(converToArray( div.childNodes));
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How to find the maximum and minimum value of array elements in Java
What to do if an error occurs in the script of the current page
What does mesh networking mean?
How to Get Started with Buying Cryptocurrencies
What does web server mean?
Solid state drive data recovery
Introduction to the relationship between php and front-end
How to use oracleparameter
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
