JavaScript study notes (18) Obtain the element code in the page_Basic knowledge

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

Copy code The code is as follows:

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

Copy the code The code is as follows:

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

Copy code The code is as follows:

• 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:

Copy code The code is as follows:

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:

Copy code The code is as follows:

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

Copy code The code 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：

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