一、关于DOM
- 什么是DOM?
文件对象模型(Document Object Model),是w3c组织推荐的处理可扩展语言(HTML/XML)的标准编程接口。
- DOM树
1.文档:一个页面就是一个文档,DOM中使用Document表示。
2.元素:页面里面所有的标签都是元素,使用element表示
3.节点:网页中所有内容都是节点(标签,属性,文本,注释等),使用node表示。
DOM把以上内容都看做是对象
3.获取元素–如何获取页面元素?
- 根据ID获取:使用getElementById()方法可以获取带有ID的元素对象。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="time">2020-7-24</div>
</body>
<!--
1.参数ID是大小写敏感
2.返回的是一个元素对象
-->
<script>
var time = document.getElementById('time');
console.log(time);
console.log(typeof time);
//console.dir() 打印我们返回的元素对象,更好的查看里面的属性和方法。
console.dir(time);
</script>
</html>
- 根据标签名获取:使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>getElementsByTagName</title>
</head>
<body>
<ul>
<!-- 若页面中只有一个li,返回的依旧是数组的形式 -->
<!-- 若页面中没有li,返回的依旧是伪数组,但是是一个空的伪数组。 -->
<li>1</li>
<!-- <li>2</li>
<li>3</li>
<li>4</li>
<li>5</li> -->
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
<script>
/*
*返回来的是获取过来对象的集合 以伪数组的形式储存的
*/
var lis = document.getElementsByTagName('li');
console.log(lis);
// 获取对应位
console.log(lis[0]);
// 如果想要一次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
var ol = document.getElementsByTagName('ol');
// 父元素必须是单个对象,获取时不包括父元素自己。不过一般会给ol增加一个ID
console.log(ol[0].getElementsByTagName('li'));
</script>
</html>
- 根据标类名获取:使用getElementsByClassName()方法根据类名返回元素对象集合。
- 根据指定选择器返回第一个元素对象:querySelector(‘选择器’)-切记里面的选择器需要加符号
- 根据指定选择器返回所有元素对象:querySelectorAll(‘选择器’)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
</body>
<script>
// 根据类名返回元素对象集合
var box = document.getElementsByClassName('box');
console.log(box);
// 根据指定选择器返回第一个元素对象:querySelector('选择器'):切记里面的选择器需要加符号
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 根据指定的选择器返回全部元素对象
var allBox = document.querySelectorAll('.box');
console.log(allBox);
</script>
</html>