什么是DOM
-
DOM,全称是Document Object Model
-
在JS中通过DOM来对HTML来对HTML文档进行操作。所以DOM很重要
-
Document 文档
文档表示的就是整个HTML网页 -
Object 对象:
网页中的每个部分都可以转换为一个对象 -
Model 模型
使用模型表示对象之间的关系,方便获取对象
模型
文档
<html>
<head>
<title>网页的标题</title>
<head>
<body>
<a href="1.html">超链接</a>
</body>
</html>
文档对应的模型
可以根据这个模型确定元素之间的关系,例如 已知html节点,可以找到它的子孙节点。
节点
- 节点Node,是构成网页的最基本的组成部分,网页中每个部分都可以称为一个节点。
- 例如:html标签,属性id、class,文本txt,注释,整个文档等都是节点。
- 节点的类型:
文档节点:整个HTML文档
元素节点:html文档中的标签。html a input img 等等
属性节点:元素的属性。href,rel ,id,class,name等等
文本节点:HTML标签中的文本内容
节点的属性
- nodeName
- nodeType
- nodeValue
文档节点(document)
- 文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
- document对象作为window对象的属性存在的,我们不用获取可以直接使用。
- 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
元素节点(Element)
- HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
- 浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
- 比如:
document.getElementById()
根据id属性值获取一个元素节点对象
文本节点(Text)
- 文本节点表示的是HTML标签以外的文本内容,任意非HTML的文本都是文本节点。
- 它包括可以字面解释的纯文本内容。
- 文本节点一般是作为元素节点的子节点存在的。
- 获取文本节点时,一般先要获取元素节点。在通过元素节点获取文本节点。
- 例如:
元素节点.firstChild;
获取元素节点的第一个子节点,一般为文本节点
属性节点(Attr)
- 属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
- 可以通过元素节点来获取指定的属性节点。
- 例如:
元素节点.getAttributeNode(“属性名”); - 注意:我们一般不使用属性节点
事件
- 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript 与 HTML 之间的交互是通过事件实现的。
- 对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键,等等
获取元素节点
- 通过document对象调用
1.getElementById():通过id属性获取一个元素节点对象
2.getElementsByTagName(): 通过(target)标签名获取一组元素节点对象
3.getElementsByName():通过name属性获取一组元素节点对象
获取元素节点的子节点
- 通过具体的元素节点调用
getElementsByTagName():方法,返回当前节点的指定标签名后代节点
childNodes:属性,表示当前节点的所有子节点
firstChild:属性,表示当前节点的第一个子节点
lastChild**;属性**,表示当前节点的最后一个子节点
获取父节点和兄弟节点
- 通过具体的节点调用
- parentNode:属性,表示当前节点的父节点
- previousSibling****属性,表示当前节点的前一个兄弟节点
- nextSibling****属性,表示当前节点的后一个兄弟节点
元素节点的属性
- 获取,元素对象.属性名
element.value
element.id
element.className
设置,元素对象.属性名=新的值
element.value = “hello”
element.id = “id01”
element.className = “newClass"
其他属性
nodeValue:文本节点可以通过nodeValue属性获取和设置文本节点的内容
innerHTML: 元素节点通过该属性获取和设置标签内部的html代码
使用CSS选择器进行查询
- querySelector()
- querySelectorAll()
- 这两个方法都是用document对象来调用,两个方法使用相同,都是传递一个选择器字符串作为参数,方法会自动根据选择器字符串去网页中查找元素。
- 不同的地方是querySelector()只会返回找到的第一个元素,而querySelectorAll()会返回所有符合条件的元素。
节点的修改
- 这里的修改我们主要指对元素节点的操作。
- 创建节点 document.createElement(标签名)
- 删除节点 父节点.removeChild(子节点)
- 替换节点 父节点.replaceChild(新节点 , 旧节点)
- 插入节点
父节点.appendChild(子节点)
父节点.insertBefore(新节点 , 旧节点)