Day-23　使用DOM节点

网页中的<script>

基本上，JavaScript透过控制DOM来控制网页。若要在网页中直接写进JavaScript语法（而非引用独立js档），就要将程序码写在<script>标签中，且不能将其放在<head>标签内，否则会无效，因为：

  1. 基於浏览器解析网页的顺序，此时会暂停解析，先执行<script>标签中的内容。
  2. 因为尚未解析网页本体，所以JavaScript语法中想抓取的对象（如网页中某标签的id），就根本找不到。

DOM节点的抓取与类型

常见的抓取方法如下

  • document.getElementById('id名称')　//类似css选取器抓id，不用井字号
  • document.getElementsByTagName('tag名称')　//可抓全部同名标签
  • 以下两个效果很像
    • document.getElementsByClassName('class名称')　//抓class，抓回类似阵列
    • document.querySelector('选取器条件')　//类似css选取器class
    • querySelector回传静态的静态NodeList，不会跟着DOM改变。而getElementsByClassName是动态的HTML元素，会跟着DOM改变。
    • document.querySelectorAll('选取器条件')　//可抓全部同名元素（class与id），抓回类似阵列

例

指定变数i之querySelector「x」中的「y」。

/<script>
let i = document.querySelector("#x")
let j = i.querySelector("#y")

console.log(i)
console.log(j)
/</script>

DOM节点的查找与关系

如DOM-Tree所示，DOM节点具有层级概念。节点与节点之间是上下或平行的关系。

  • 上下（父子）关系：除了根部的document，每个节点都有一个上层（父）节点，反之，就是下层（子）节点。
  • 平行（兄弟）关系：节点之间拥有同一上层（父）节点，就是平行（兄弟）节点。

此外，重要的属性具列如下：

  • Node.childNodes：各节点皆有，写成「node.hasChildNodes()」检查有无子节点。
  • Node.firstNodes：取得第一个子节点。
  • Node.lastNodes：取得最後一个子节点。。
  • Node.parentNodes：取得父元素。
  • Node.previousSibling：取得同层的前一个节点。
  • Node.nextSibling：取得同层的後一个节点。

<<:  Day-22　操作方法：BOM与DOM

>>:  Day-24　DOM Node

华南X99-F8 opencore引导安装黑苹果MacOS big sur

配置信息： CPU：E5 2680 V3 主板：华南 X99-F8 内存：SK 16G x2 显卡：...

[Day28] 第二十八章-查询订单api (express)

前言 前面完成建立订单的api後 我们今天要把查询订单做完 扣除今天剩下2天的时间 今天在把查询做完...

[Day15] Vite 出小蜜蜂～随机射击 Randomly Shoot！

Day15 在 Space Invaders 的游戏设计中， 除了随着不断前进而产生的压迫感之外， ...

Day3 # 资料型别

昨天已经能够透过 Go 印出 Hello World 了，今天要来认识资料型别， 如果都准备妥妥的，...

Day 5 网路宝石：AWS VPC 架构 Routes & Security (上)

两个 Private Subnet 的沟通方式 Private Subnet（下图#1）是一封闭的...