本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1.DOM简介
1.1什么是DOM
- 文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理可扩展标记语言( HTML或者XML
)的标准编程接口。 - W3C已经定义了-系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
1.2DOM树
- 文档:一个页面就是-个文档, DOM中使用document表示
- 元素:页面中的所有标签都是元素, DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等) , DOM中使用node示
- DOM把以上内容都看做是对象
2.获取元素
2.2、01-getElementByld获取元素
<body>
<div id="time">2019-9-9</div>
<script>
// 1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
// 2. get获得element 元素by通过驼峰命名法
// 3.参数id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5. console.dir 打印我们返回的元素对象更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
2.3根据标签名获取
-
使用getElementsByTagName0方法可以返回带有指定标签名的对象的集合。
- 知否知否，影视等你好久1
- 知否知否，影视等你好久2
- 知否知否，影视等你好久3
- 知否知否，影视等你好久4
- 知否知否，影视等你好久5
</ul> <script> //返回的是获取过来元素对象的集合以伪数组的形式存储的 var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); //遍历li里的元素 for(var i=0; i<lis.length;i++) { console.log(lis[i]); } </script> -
还可以获取某个元素（父元素）内部所有指定标签的子元素
element.getElementsByTagName('标签名');
-
注意：父元素必须是单个对象（必须指明是哪一个元素对象）,获取的时候不包括父元素自己
2.4通过HTML5新增的方法获取
2.5获取特殊元素（body,html）
获取body元素
获取html元素
