【千锋教育JavaScript实战详解】第3章 DOM入门之获取元素

《千锋教育JavaScript实战详解》第3章围绕DOM入门展开，核心内容是通过DOM获取HTML元素并操作其属性与样式，重点讲解了获取元素的方法、属性操作、样式设置及动态与非动态获取的区别。

document文档
document是整个页面的根对象（最外层对象），通过它可以获取页面中的具体HTML元素，其类型为对象类型。
document对象常见属性包括：
doctype：获取或设置文档头信息。
documentElement：获取或设置<html>标签。
head：获取或设置<head>标签。
body：获取或设置<body>标签。
title：获取或设置<title>标签。

获取元素的方法
getElementById()：通过元素的id属性获取指定元素，id具有唯一性。示例代码如下：

<body> <div id="div1">hello</div></body><script> var div = document.getElementById('div1');</script>

getElementsByTagName()：通过标签名获取一组元素集合，可在整个document文档或指定祖先元素下获取。语法格式为：document/祖先元素.getElementsByTagName('标签名');。
getElementsByClassName()：通过class属性获取一组元素集合，使用方式与getElementsByTagName()类似，小括号内为class样式名。语法格式为：document/祖先元素.getElementsByClassName('样式名');。
querySelector()和querySelectorAll()：
querySelector()：获取单一元素，与CSS中的选择器方式类似，如id选择器、class选择器等。示例代码如下：

元素属性操作
获取元素后，可通过点的方式获取元素属性。例如：

<body> <div id="div1" class="box" title="Hello JS">hello</div></body><script> var div = document.getElementById('div1'); console.log(div.id); //div1 console.log(div.className); //box console.log(div.title); //Hello JS</script>

注意class属性因属于JavaScript保留字，需通过className获取；for属性需通过htmlFor获取。
除获取属性外，还可设置元素属性，如修改元素的title属性。
样式设置
行间样式：可获取和设置HTML元素的style属性。
cssText：在style对象下，可一次性设置多组CSS样式。示例代码如下：

<body> <div id="div1" style="width:100px; height:50px; background:red;">hello</div></body><script> var div = document.getElementById('div1'); div.style.cssText = 'width:200px; height:100px; background:blue;';</script>

当出现多个cssText属性时，后面的会覆盖前面整个cssText中的样式。
非行间样式：style属性只能获取行间样式，无法获取<style>标签中的非行间样式。若需获取非行间样式，可使用window.getComputedStyle()方法，其语法格式为：window.getComputedStyle(元素).样式;，window对象可选。示例代码如下：

获取元素的分类
动态获取：包括getElementsByTagName()和getElementsByClassName()，可在调用变量时获取元素。
非动态获取：包括getElementById()、querySelector()、querySelectorAll()，在定义变量时已获取完毕，后添加的元素需重新获取。
其他应用
innerHTML：用于获取和设置指定标签内的内容，包括文本和标签等信息。
隔行换色：可通过JavaScript实现一组元素的隔行换色效果。
拼接背景图：利用嵌套循环将集合分成横竖排列组合，实现背景图拼接。
九九乘法表：利用嵌套循环的顺序和值的变化实现。

您可能感兴趣问答

Collapsible

热门标签

热点问答