get
<div>
<strong></strong>
</div>
<div>
<span>
<strong></strong>
</span>
</div>
querySelector('div > span strong')//
querySelectorAll() //选的是一组
节点的类型
元素节点 ---- 1
属性节点 ---- 2
文本节点 ---- 3
注释节点 ---- 8
document ---- 9
DocumentFragment ---- 11
遍历节点数
- parentNode父节点 （一般父节点只有一个）
- childNodes子节点：
这里对子节点举个例子:
<html>
<head>
</head>
<body>
<div>
<!--this is a element -->
<span></span>
<a></a>
</div>
</body>
</html>
上面代码中 div 的子节点有 7 个，分别是：
文本节点，注释节点， 文本节点， 元素节点， 文本节点， 元素节点， 文本节点
- firstChild 第一个子节点
在上面这个例子中 div 的 firstChild 是 文本节点 - lastChild 最后一个子节点
在上面这个例子中 div 的 lastChild 是 文本节点 - nextSibling 下一个兄弟节点
在上面这个例子中 span 的 nextSibling 是 文本节点 - previousSibling 前一个兄弟节点
在上面这个例子中 span 的 previousSibling 是文本节点
遍历元素节点数
- parentElement 父元素
for exmple：
<html>
<head>
</head>
<body>
<div>
<span></span>
<a></a>
</div>
</body>
</html>
上面这个例子里面的 div 的 parentElement 为 body ，body 的parentElement 为 html
- children 元素的子元素节点
上面这个例子里面的 div 的 children 为 span 和 a 两个 - node.childElementCount == children.length; (不常用)
- firstElementChild
- lastElementChild
- nextElementSibling / previousElementSiling
这四个和上面遍历节点数中的 firstChild lastChild nextSibling previousSibling 差不多就是后者是相对于元素的。
节点的四个属性：
- nodeName
元素的标签名，以大写形式表示，只读 - nodeValue
Text(文本)或Comment节点的文本内容,可读写 - nodeType
<div> 123 <!-- This is comment --> <strong></strong> <span></span> <em></em> <i></i> <b></b> </div> <script> var div = document.getElementsByTagName('div')[0]; </script>
这里封装一个方法将所有的直接子元素返回
<div>
123
<!-- This is comment -->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
function retElementChild(node) {
var arr =[];
for(var)
}
console.log(retElementChild(div));
</script>
- attributes
Element 节点属性的集合 - hasChildNodes() 返回 ture 或者 flase 有节点或者没有
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
