DOM基础:DOM介绍和查找元素

DOM(Document Object Model)即文档对象模型，针对HTML和XML文档的API(应用程序接口)。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

一.DOM介绍

DOM中的三个字母，D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。

DOM有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1在1998年10月成为W3C标准。

IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。

1.节点：加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结构理解为由节点组成。

二、查找元素

getElementById()：获取特定ID元素的节点，如果找到则返回该元素的HTMLDivElement对象，否则返回null

getElementsByTagName()：获取相同元素的节点列表，返回一个对象数组HTMLCollection(NodeList)

使用索引来获取指定的节点(从0开始)
length属性来获取节点列表的元素数量

getElementsByName()：获取相同名称(name属性)的节点列表

getElementsByClassName()：获取相同css类名称(class属性)的节点列表

querySelector()：返回文档中匹配指定的CSS选择器的第一元素

querySelectorAll()：HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

getElementsBy*()和querySelectorAll()的区别

getElementsBy*()为一个动态的，会实时根据dom元素的变化来重新获取所有元素列表
querySelectorAll()是一个静态的，会获取运行该方法时的dom元素列表，而不会关心之后dom的变化

三、属性操作

点(.)操作符来获取和设置属性值

box.id //获取box元素的id属性
box.id='newid' //设置box元素的id属性

点(.)操作符只能获取和设置html元素的官方属性，一些自定义属性获取时会出现一些奇怪的兼容问题

class属性需要使用className属性来操作

tagName属性：获取节点的标签名

style属性：获取和设置该元素的内联样式

box.style //获取内联样式字符串
bos.style='color:red;font-size:20px;' //设置内联样式
box.style.display //获取内联样式中的指定属性
box.style.display='none' //设置内联样式中的指定属性

classList属性：返回calss属性列表

使用索引来获取指定的className(从0开始)
length：class属性列表的个数
value：以字符串形式返回class的值
add()：添加指定className到列表中
remove()：从列表中删除指定的className

data-*属性的操作

首先我们可以使用标准的DOM方法getAttribute()、setAttribute()或removeAttribute()来操作

另外我们可以通过dataset属性来操作
box.dataset.age; //获取data-age的属性值
box.dataset.age=27; //设置data-age的属性值
如果属性名称中还包含连字符(-)，需要转成驼峰命名方式并去掉连字符
如属性data-this-is-my="xia"，那么获取该值时用box.dataset.thisIsMy

元素的内容节点操作：innerHTML、innerHTML、outerText、outerHTML

getAttribute(key)：获取属性的值，对于一些非标准的属性可以正常获取，但是点(.)操作符或出现问题

setAttribute(key,val)：设置属性的值，属性不存在则添加，已存在则覆盖

removeAttribute(key)：移除属性