首頁 > 開發者 > JavaScript
標籤：ntc document for nodetype doctype asc lin function class
一、節點選取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // 首尾子節點有相容性問題 // firstChild firstElementChild // lastChild lastElementChild // 兄弟節點 // nextSlibing nextElementChild // previousSibling previousElementsSibling window.onload = function() { var oLi = document.getElementById(‘li1‘); var oPre = oLi.previousElementSibling || oLi.previousSibling; oPre.style.background = "red"; } </script></head><body> <ul id="ul1"> <li></li> <li id="li1"></li> <li></li> </ul></body></html>
二、dom節點childNodes和nodeType
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var oUl = document.getElementById(‘ul1‘); // alert(oUl.childNodes[1].nodeType); var i = 0; for (i = 0; i < oUl.childNodes.length; i++) { if (oUl.childNodes[i].nodeType == 1) { //1是指標籤節點 3是指文本節點 oUl.childNodes[i].style.background = ‘red‘; } } } </script></head><body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> </ul></body></html>
三、children是沒有相容問題的childNodes
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { var oUl = document.getElementById(‘ul1‘); // alert(oUl.children.length); var i = 0; for (i = 0; i < oUl.children.length; i++) { oUl.children[i].style.background = ‘red‘; } } </script></head><body> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> </ul></body></html>
javascript基礎--DOM選取子節點
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
