13node.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>帖子1<a href="#">删除</a></li> <li>帖子1</li> <li>帖子2</li> </ul> <script> // parentNode父节点 var alink = document.getElementsByTagName("a")[0]; console.dir(alink); console.log(alink.parentNode.nodeName); //console.log(alink.parentElement.TagName); console.log(alink.parentNode.parentNode); // children与childNodes var oUl = document.querySelector("ul"); console.log(oUl.children.length);// 3 只包含元素节点儿子 console.log(oUl.childNodes.length); // 7 包含所有儿子节点 把回车换行也看作孩子 /* for(var i=0; i<oUl.children.length; i++) { //经常使用children oUl.children[i].style.color = "green"; } */ for(var i=0; i<oUl.childNodes.length; i++) { // 判断是否是元素儿子 nodeType 3 文本节点 1 元素节点 //console.log(oUl.childNodes[i].nodeType); if(oUl.childNodes[i].nodeType === 1) { oUl.childNodes[i].style.color = "red"; } } </script> </body> </html>