【JS-DOM】遍历和搜索学习笔记【1】

LiujiaHuan13

已于 2022-07-16 13:51:18 修改

阅读量158

点赞数

文章标签： javascript 学习前端

于 2022-06-04 11:33:31 首次发布

本文链接：https://blog.csdn.net/qq_39679797/article/details/125120102

版权

最近闲来无事浅浅复习一手初中自学的JS，毕竟以前只是当课外爱好学习的，学习时间也不足，基础不牢，所以现在来复习一下。
笑死了，纵观整个大一，好像一直在填初高中的坑。

1.子节点

childNode
firstNode
lastNode

0x01 childNode 方法是什么？

chilNode集合列出了所有子节点，包括文本节点

如：展示document.body的所有子元素

    for (let i = 0; i < document.body.childNodes.length; i++) {
      alert( document.body.childNodes[i] ); 
      // Text, DIV, Text, UL, ..., SCRIPT
    }

0x02 firshChild lastChild和childNode的关系？

第一个子节点 and 最后一个子节点
他们是同级子方法

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

0x03 childNode 是个集合不是数组如何遍历？

使用 for … of

for (let node of document.body.childNodes) {
  alert(node); // 显示集合中的所有节点
}

2 .兄弟节点父节点

nextSlibling
previousSibling

// <body> 的父节点是 <html>
alert( document.body.parentNode === document.documentElement ); // true

// <head> 的后一个是 <body>
alert( document.head.nextSibling ); // HTMLBodyElement

// <body> 的前一个是 <head>
alert( document.body.previousSibling ); // HTMLHeadElement

3. 纯元素导航（不要类似注释文本等节点）

children
firstElementChild，lastElementChild — 第一个和最后一个子元素
previousElementSibling，nextElementSibling — 兄弟元素

详细请看WEB/P_DOM文件夹

里面放了整个导图

搜索页面的任意元素

getElement*
querySelector*

1.getElement*

0x01 getElementById

id直接做引用
遵守唯一性

0x02 区分getElement和getElements

element返回单个元素
elements返回元素集合*

所以在elements中选择时需要加上下标号

document.getElementsByTagName('test')[0];

迭代

  let inputs = table.getElementsByTagName('input');

  for (let input of inputs) {
    alert( input.value + ': ' + input.checked );
  }

0x03 getElementsBy*

ByTagName
ByName (name字段)
ByClassName

2. querrySelector

Selector(css) 返回第一个符合给定css选择器的元素
SelectorAll 返回集合

3. elem.matches(css)

返回 true 或 false

遍历元素（例如数组或其他内容）并试图过滤那些我们感兴趣的元素时，这个方法会很有用

如：

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
  // 不一定是 document.body.children，还可以是任何集合
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("The archive reference: " + elem.href );
    }
  }
</script>

4. 区分实时静态

getElementsBy 内部数据会因运行到不同位置自动更新

<div>First div</div>

<script>
  let divs = document.getElementsByTagName('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 2
</script>

querySelctor是静态的 不会随着不同位置而改变

<div>First div</div>

<script>
  let divs = document.querySelectorAll('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 1
</script>

汇总

dom纯元素导航

全部内容导航

方法名	搜索方式	可以在元素上调用？	实时的？
querySelector	CSS-selector	✔	-
querySelectorAll	CSS-selector	✔	-
getElementById	id	-	-
getElementsByName	name	-	✔
getElementsByTagName	tag or ‘*’	✔	✔
getElementsByClassName	class	✔	✔

学习于 https://zh.javascript.info/
高质量学习JS网站

LiujiaHuan13

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JS-DOM】遍历和搜索学习笔记【1】

chilNode集合列出了所有子节点，包括文本节点如：展示document.body的所有子元素0x02 firshChild lastChild和childNode的关系？第一个子节点 and 最后一个子节点他们是同级子方法0x03 childNode 是个集合不是数组如何遍历？使用 for … of2 .兄弟节点父节点nextSliblingpreviousSibling3. 纯元素导航（不要类似注释文本等节点）childrenfirstElementChild，
复制链接

扫一扫