遍历 DOM⭐
获取节点
- 所有子节点：
ele.childNodes，返回值是一个可迭代对象，不是数组 - 第一个子节点：
ele.firstChild - 最后一个子节点：
ele.lastChild - 是否有子节点：
ele.hasChildNodes - 下一个兄弟节点：
ele.nextSibling - 上一个兄弟节点：
ele.previousSibling - 父节点：
ele.parentNode
注意：节点是包括注释、文本(document等)等等都涵盖在内的。
如果我们只是单纯的关心操纵的是代表标签的和形成页面结构的元素节点，那么使用下面的方法：
获取纯元素节点
这些链接和我们在上面提到过的类似，只是在词中间加了 Element：
children— 仅那些作为元素节点的子代的节点。firstElementChild，lastElementChild— 第一个和最后一个子元素。previousElementSibling，nextElementSibling— 兄弟元素。parentElement— 父元素。
表格
<table> 元素支持 (除了上面给出的，之外) 以下这些属性:
table.rows—<tr>元素的集合。table.caption/tHead/tFoot— 引用元素<caption>，<thead>，<tfoot>。table.tBodies—<tbody>元素的集合（根据标准还有很多元素，但是这里至少会有一个 — 即使没有被写在 HTML 源文件中，浏览器也会将其放入 DOM 中）。
<thead>，<tfoot>，<tbody> 元素提供了 rows 属性：
tbody.rows— 表格内部<tr>元素的集合。
<tr>：
tr.cells— 在给定<tr>中的<td>和<th>单元格的集合。tr.sectionRowIndex— 给定的<tr>在封闭的<thead>/<tbody>/<tfoot>中的位置（索引）。tr.rowIndex— 在整个表格中<tr>的编号（包括表格的所有行）。
<td> 和 <th>：
td.cellIndex— 在封闭的<tr>中单元格的编号。
查询搜索节点⭐
用法
- ele.querySelectorAll(css) ：返回一个满足 css 选择器的所有节点的可迭代对象
- ele.querySelector(css) ：返回满足 css 选择器的第一个元素节点
- ele.matches(css) ：检查 ele 是否与给定的 css 选择器匹配，返回 bool
- ele.closest(css) ：搜索距离 ele 最近的 （包括 ele 本身） 父级链上的第一个匹配 css 选择器的元素
补充：css 选择器
| 选择器 | 例子 | 例子描述 | CSS | .class | .intro | 选择 class="intro" 的所有元素。 | 1 | #id | #firstname | 选择 id="firstname" 的所有元素。 | 1 | * | * | 选择所有元素。 | 2 | element | p | 选择所有 元素。 | 1 | element,element | div,p | 选择所有 元素和所有 元素。 常见问题FAQ
如需帝国cms功能定制以及二次开发请联系我们联系作者
请选择支付方式×
×
|
|---|
发表评论
还没有评论，快来抢沙发吧！