DOM简介
◆ DOM是JS操控HTML和CSS的桥梁
◆ DOM (Document Object Model,文档对象模型)是JavaScript操作HTML文档的接口,DOM赋予我们添加、移除和修改页面元素(使文档操作变得非常优雅、简便。
(元素的文字也是DOM的一个节点)◆ DOM最大的特点就是将文档表示为节点树。
访问元素节点
◆ 所谓“访问”元素节点,就是指"得到”、"获取”页面上的元素节点
◆ 所以要对节点进行操作,第一步就是要
得到
它◆ 访问元素节点主要依靠document对象
认识document对象
◆ document对象是DOM中最重要的东西,几乎所有DOM的功能都
封装
在了document对象中◆ document对象也表示整 个HTML文档,它是DOM节点树的根
获取元素的方式
可以通过获取
id名字
而在js里面直接使用
document.getElmentById()
通过id获取元素
◆ 如果页面上有相同id的元素,则只能得到
第一个
document.getElmentById()
getElementsByClassName()
通过
class类名
获取元素数组不兼容IE8及以下
document.getElementsByClassName()
getElementsByTagName()
通过
标签名
获取元素数组◆ 数组方便遍历,从而可以
批量
操控元素节点◆ 即使页面上只有一个指定标签名的节点,也将得到长度为1的数组
◆
任何
一个节点元素也可以调用getElementsByTagName()方法,从而得到其内部的某种类的元素节点
document.getElementsByTagName()
getElementsByName()
通过
name
获取
document.getElementsByName()
querySelector()
通过
选择器
获取元素◆ querySelector()方法只能得到页面上一个元素,如果有多个元素符合条件,则只能得到
第一个元素
◆ querySelector()方法从IE8开始兼容, 但从IE9开始支持CSS3的选择器,如:
nth-child() 、
CSS3选择器形式都支持良好
document.querySelector()
//不支持 IE7 及以下
querySelectorAll()
通过
选择器
获取元素数组◆ querySelectorAll()方法的功能是通过选择器得到元素数组
◆ 即使页面上只有一个符合选择器的节点,也将得到长度为1 的数组,
document.querySelectorAll()
// 不支持 IE7 及以下
document.querySelectorAll("[class^='text-']")
// 获取所有class 以 text开头的元素
我们常用的方法中,getElementById和 getElementsByName(通过name属性获取元素)是必须以
document开头
的。
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
// 得到p标签的数组
let aP = document.getElementsByTagName("p");
console.log(aP);
let box = document.getElementById("box");
let box_p = box.getElementsByTagName("p");
console.log(box_p);
</script>
</body>
特殊元素的获取
console.log (document.head);//head
console.log (document.body);//body
console.log (document.title);title标签的文字内容,可以赋值修改title
console.log (document.documentElement);//html
document.title = "我修改后的title";
延迟运行
在测试DOM代码时,通常JS代码一定要写到HTML节点的后面,否则JS无法找到相应HTML节点
可以使用
window.onload = function(){}
事件,使页面加载完毕后,再执行指定的代码
<script>
// 给window对象添加onload事件监听.
// onload表示页面都加载完毕了