DOM(文档对象模型)的概念
- D (document)
文档表示的就是整个的HTML文档 - O (object)
对象表示将网页文档中的每一部分都看作对象 - M (model)
使用模型来表示对象之间的关系,这样方便获取指定的对象
节点 (构成HTML文档最基本的单元)
- 文档节点 整个HTML文档
- 元素节点 HTML文档中的HTML标签
- 属性节点 元素的属性
- 文档节点 HTML标签中的文本内容
节点的属性
NodeName NodeType NodeValue
文档节点 #document 9 null
元素节点 标签名 1 null
属性节点 属性名 2 属性值
文本节点 #text 3 文本内容
事件
--就是文档或者浏览器窗口中发生的一些特定的交互瞬间
--对于web应用来说,有下面代表性的事件:点击某个元素、将鼠标移至 某个元素的上方、按下鼠标上的键
获取元素节点
--document进行调用
-
getElementById() 通过id属性来获取一个元素节点对象
-
getElementsByTagName() 通过标签名来获取一组元素节点对象
-
getElementsByName() 通过name属性获取一组元素节点对象
-
body 保存的时document的引用
-
documentElement 保存HTML的根标签
-
all 可以获取HTML页面中的所有的元素(对象数组)
等价于getElementByTagName("*") -
getElementsByClassName(“class属性值”)
根据元素的class属性值查询一组节点对象(该方法不支持IE8及以上) -
queryselector("选择器”) 需要一个选择器字符串作为参数,可以根据一个css选择器来查询一个元素节点对象
注意:使用该方法只能查询一个元数,即使满足条件的结果有多个,也只会返回第一个
此时需要使用 querySelector()来进行代替,此方法即使满足条件的元素只有一个也会返回一个元素对象数组-补充: innerHtml 用于获取元素内部的HTML代码 对于自结束标签,这个属性没有意义 如果直接读取元素节点的属性直接使用 元素.属性名的格式进行读取 例如:元素.id 元素.name 元素.value 注意:class属性不能采用这个格式 要使用 元素.className 来获取class的属性值
获取元素节点的子节点
--通过具体的元素节点进行调用
-
getElementByTagName()
方法,返回当前节点的指定标签名的后代节点 -
childNodes
属性,获取当前节点所有的子节点(包括文本在内的所有节点) -
firstChild
属性,表示当前节点的第一个子节点 -
lastChild
属性:表示当前节点的最后一个节点 -
children
属性,可以获取当前元素所有的子元素 -
firstElementChild
属性,可以获取当前元素的第一个子节点
获取父节点和兄弟节点
--通过具体的节点进行调用
-
parentNode 属性,表示当前节点的子节点
-
previousSibling 属性,表示当前节点的前一个兄弟节点
-
nextSibling 属性,表示当前节点的后一个兄弟节点
补充 innerHTML 可以获取元素内部的HTML代码 innerText 可以将元素的文本内容进行返回,没有附带标签