DOM
1.DOM简介
1.1什么是DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
1.2DOM树
DOM把以上内容都看做是对象
2.获取元素
2.1如何获取页面元素
DOM在我们实际开发中主要用来操作元素
如何获取页面中的元素？
获取页面中的元素可以使用以下几种形式
2.2根据ID获取
使用getElementById()方法可以获取带有ID的元素对象
<div id="time">2020-5-24</div>
<script>
// 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签下面
// 2.get 获得 element 元素 by 通过 驼峰命名法
// 3.参数 id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById(‘time‘);
console.log(timer);
console.log(typeof timer); //object (typeof查看元素类型)
// 5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
2.3根据标签名获取
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName(‘标签名‘);
注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2.得到元素对象是动态的
<ul>
<li>知否知否1</li>
<li>知否知否2</li>
<li>知否知否3</li>
<li>知否知否4</li>
<li>知否知否5</li>
</ul>
<ul id=‘nav‘>
<li>蜘蛛侠</li>
<li>蜘蛛侠</li>
<li>蜘蛛侠</li>
<li>蜘蛛侠</li>
<li>蜘蛛侠</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName(‘li‘);
console.log(lis);
console.log(lis[0]);
// 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3.element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById(‘nav‘); //这个获得nav元素
var navLis = nav.getElementsByTagName(‘li‘);
console.log(navLis);
</script>
原文：https://www.cnblogs.com/wxdddm/p/12952794.html