getElementById()
querySelector()
getElementsByClassName()
querySelectorAll()
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
textContent
innerHTML
createElement()
appendChild()
MDN 文件物件模型 (DOM)
MDN DOM概述
JavaScript入门系列:BOM和DOM笔记
BOM(Browser Object Model)
JS基础:DOM(Document Object Model) & BOM(Browser Object Model)
getElementById('idname')
:填入 idnamequerySelector()
:一般名称为 name
, id 名称为 #idname
,class 名称为 .classname
,若有多个只会选取第 1个getElementsByClassName('classname')
:Element 有 squerySelectorAll()
:同上,一般名称为 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即时读入/存取资料
是的!我买ㄌ Hack The Box 的 VIP+,因为我觉得 Try Hack Me 上面的 W...
这篇的程序码在 https://github.com/DanSnow/ironman-2020/t...
在这系列教学里,我们以撰写一个以购物车为主题的 Kotlin 函式库为例,经过一连串 TDD、语法风...
Day 16 - Android Studio 一个简单的计数器 上次我们大致介绍了Andorid ...
答: 查对方电脑名称的条例有 DNS WINS NetBIOS over vpn tcp/ip LM...