文档对象模型,是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM接口,可以改变网页的内容,结构和样式
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中所有的标签都是元素,DOM中使用element表示
节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示
DOM把以上内容都看作对象
使用 getElementById
获取带有ID的元素对象
Document
的方法 getElementById()
返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。
var element = document.getElementById(id);
注:
element
是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.id
是大小写敏感的字符串,代表了所要查找的元素的唯一ID.实例:
<div id="time">2019</div>
<script>
var time = document.getElementById('time');
console.log(time);
</script>
返回:
使用 document.getElementsByTagName
可以返回带有制定标签名的对象的集合
实例:
<ul>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
</ul>
<script>
var tag = document.getElementsByTagName('li');
console.log(tag);
</script>
返回:
返回的是获取过来元素对象的集合,以伪数组的形式存储的 也就是说我们可以通过提取数组元素的方法得到其中一个元素的内容。
例如: console.log(tag[0]); 通过这个,我们可以得到第一个元素的内容:猫狗鼠鱼 如下图:
如果我们想依次打印里面的元素,可以使用遍历的方式:
for(var i = 0 ;i < tag.length;i++){
console.log(tag[i]);
}
得到:
element.getElementsByTagName()
如图,我们有两组ul
通过代码:
<ul>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
<li>猫狗鼠鱼</li>
</ul>
<ul id="nav">
<li>猫狗鼠</li>
<li>猫狗鼠</li>
<li>猫狗鼠</li>
<li>猫狗鼠</li>
<li>猫狗鼠</li>
</ul>
<script>
var nav = document.getElementById('nav');
navs = nav.getElementsByTagName('li')
console.log(navs);
</script>
解释:
输出:
document.getElementsByClassName('类名') //根据类名返回元素对象集合
实例:
<p class="new">你好</p>
<script>
var saying = document.getElementsByClassName('new');
console.log(saying);
</script>
返回:
document.querySelector('选择器') //根据指定选择器返回第一个元素对象*
实例:
var firstSaying = document.querySelector('.new');
console.log(firstSaying);
说明: 使用 document.querySelector('选择器') 可以直接自动判断选择器类型,
.类名
为class选择器#类名
为id选择器 其它形式示例:
返回:
实例:
var allNav = document.querySelectorAll('nav');
console.log(allNav);
返回: