Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
提示：以下是本篇文章正文内容，下面案例可供参考
1. Get elements through relationships
1. Find the parent element node (return the element node, which can be chained)
box.parentElement //body
console.log（box.parentElement.parentElement）;//html
2. Parent node
box.parentNode
console.log（box.parentNode.parentNode）;
3. Child element node
box.children
console.log (box.children[0].parentNode[0]);//[0] is the node
4. Child nodes
box.childNodes //3: text node, label node, text node; among them, if there is a comment, it is also a comment label
5. The next sibling element node
box.nextElementSibling
console.log(box.nextElementSibling.nextElementSibling);
6. The next sibling node
box.nextSibling
7. The last sibling element node
box.proviousElementSibling //h3 tag
6. The last sibling node
box.proviousSibling //h3 to the middle of div: text node
8. Get the first child element node
box.firstElementChild //span tag
9. Get the first child node
box.firstChild //I am div: text node
10. Get the last element node
box.lastElementChild // annotation label
11. Get the last node
box.lastChild //Comment label to div label: text node
2. Form click event
1. Click which row and which row will change color
The code is as follows (example):
let rows=document.querySelectorAll("tr");
for(let i=0;i<rows.length;i++){
//偶数行显示
if(i%2==0){
rows[i].style.backgroundColor="pink";
}
//设置点击功能
rows[i].onclick=function(){
//排他
for(let j=0;j<rows.length;j++){
rows[i].style.backgroundColor="white";
}
//设置自己
rows[i].style.backgroundColor="pink";
}
}2. Let the even columns of the table be colored
code show as below:
let trs=document.querySelectorAll("tr");
for(let i=0;i<trs.length;i++){
let tds=trs[i].children;//选择每一行里面的单元格
//偶数列显色
for(let j=0;j<tds.length;j++){
if(j%2==0){
tds[j].style.backgroundColor="pink";
}
}
}Summarize
Exclusive design thinking: exclude others (including yourself), and design yourself alone