JavaScript Day12 - DOM(1)

DOM(Document Object Model)

  • DOM = Document Object Model (文件物件模型)
  • 可参考以前写的几篇,了解基本概念与用法
  • 基本上 DOM 就是要来操作网页上的区块,可以修改、删除以及新增

参考资料

MDN 文件物件模型 (DOM)
MDN DOM概述
JavaScript入门系列:BOM和DOM笔记
BOM(Browser Object Model)
JS基础:DOM(Document Object Model) & BOM(Browser Object Model)

选取 element

  • 单选
    • getElementById('idname'):填入 idname
    • querySelector():一般名称为 name, id 名称为 #idname,class 名称为 .classname,若有多个只会选取第 1个
  • 多选
    • getElementsByClassName('classname'):Element 有 s
    • querySelectorAll():同上,一般名称为 name, id 名称为 #idname,class 名称为 .classname
    • 多选後为阵列[],要用 for 回圈逐一读取或取代,不能一次变更,单独变更也需要指定选取第几个

存取与变更属性、内容

  • 属性
    • .getAttribute(''):取得属性的值
    • .setAttribute('属性名','属性值'):设定某个属性的值为多少,若一开始无此属性就会新增
    • .removeAttribute(''):移除指定的属性
  • 内容
    • .textContent:取得文字内容,使用 = 可以赋予(更新)
    • .innerHTML:取得文字内容外,还可以存取子属性

初始的 HTML

<body>
    <a id="link">点我连结</a>
</body>

变更 DOM

let ele = document.querySelector('#link');

ele.textContent = '点我连结至 google';
// <a id="link">点我连结至 google</a>

ele.setAttribute('href' , 'https://www.google.com/');
// 新增 href 的值为 https://www.google.com/
// <a id="link" href="https://www.google.com/">点我连结至 google</a>

console.log(ele.getAttribute('href'));
// 显示 https://www.google.com/

变更後的 HTML

<body>
    <a id="link" href="https://www.google.com/">点我连结至 google</a>
</body>

参考资料

DOM修改文字节点 - INNERTEXT或TEXTCONTENT傻傻分不清楚

次回

再说明一下 DOM


<<:  【Side Project】 点菜单功能实作 - Modal

>>:  [Day27] 透过GCP实作(3/4):建立RealTime Database即时读入/存取资料

[Day21] HTB Archetype

是的!我买ㄌ Hack The Box 的 VIP+,因为我觉得 Try Hack Me 上面的 W...

Day 29: 实作 Vue 的 Server Side Render

这篇的程序码在 https://github.com/DanSnow/ironman-2020/t...

第二十八天:用 TeamCity 发布 Package

在这系列教学里,我们以撰写一个以购物车为主题的 Kotlin 函式库为例,经过一连串 TDD、语法风...

Day 16 - Android Studio 一个简单的计数器

Day 16 - Android Studio 一个简单的计数器 上次我们大致介绍了Andorid ...

[使用者提问的问题]请问一下, 用VPN连入,\\电脑名称 找不到 \\ip 可以用 请问是什麽原因?

答: 查对方电脑名称的条例有 DNS WINS NetBIOS over vpn tcp/ip LM...