1、什么是DOM？
（1）、DOM，全称Document Object Model文档对象模型。
（2）、JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。
（3）、文档 ：表示整个HTML网页文档；
对象：网页中每个部门都转换成一个对象；
模型：使用模型来表示对象之间的关系，这样方便我们获取对象
<html>
<head>
<title>网页的标题</title>
</head>
<body>
<a href="1.html" >超连接</a>
</body>
</html>
（4）、节点：NODE，是构成我们网页的最基本组成部门，网页中的每个部分都可以称之为一个节点； 例如 html标签，属性，文本，注释，整个文档都可以称之为一个节点；虽然都是节点，但他们类型是不同的；比如 标签 我们称之为元素节点，属性称之为属性节点，文本称之为文本节点，文档称之为文档节点。节点类型不同，属性和方法也不同。
节点：Node 构成HTML文档的最基本元素
常见的节点分为四类：文档节点、元素节点、属性节点、文本节点；
（5）、文档节点 document ：
文档节点 document，代表 整个HTML文档，网页中的所有的节点都是它的子节点；
document对象是作为window对象的属性存在的，我们不用获取可以直接使用；
通过该对象我们可以在整个文档内访问查找节点对象，并可以通过该对象创建各种节点对象
（6）、元素节点 element :
HTML中的所有节点都是元素节点，这也是我们最常用的一个节点。浏览器会将页面上的所有标签都转换成一个一个元素节点，我们可以通过document的方法来获取元素节点。
例如document.getElementById();根据id属性值 来获取一个元素节点对象。
（7）、文本节点 Text：
文本节点表示HTML标签以外的文本内容，任意非HTML的文本都属于文本节点。
它包括字面解释的纯文本内容；
文本节点一般作为元素节点的子节点存在；
获取文本节点一般要先获取元素节点，再通过元素节点获取文本节点。
例如：元素节点.firstChild； 元素节点的第一个子节点一般为文本节点。
（8）、属性节点 Attr
属性节点表示标签中的一个个属性，它是元素节点的一部分，并不是元素节点的子节点；属性节点可以通过元素节点来获取指定的属性节点；
例如： 元素节点.getAttributeNode("属性名");
..注意 一般不使用属性节点；
（9）、事件
事件就是文档获取浏览器窗口中发生的一些特定的交互瞬间。
JavaScript与HTML是通过事件来实现交互的。
对于web应用来说，具有下面这些代表性的事件：点击某个元素，将鼠标移动至某个元素上方，按下键盘上某个键，等等。
（10）、获取元素节点
通过document对象调用；
- getElementById(); --通过id属性获取一个元素节点对象
- getElementsByTagName(); --通过标签名获取一组元素节点对象
- getElementsByName(); --通过name属性获取一组元素节点对象
（11）、获取元素节点的子节点
通过具体的元素节点调用；
- getElementsByTagName(); 方法---返回当前节点指定标签名后代标签
- ChildNodes 属性---表示当前节点的所有子节点
- firstChild 属性---表示当前节点的第一个子节点
- lastChild 属性---表示当前节点的最后一个子节点
（12）、获取父节点和兄弟节点
通过具体节点调用
- parentNode 属性---表示当前节点的父节点
- perviousSibling 属性---表示当前节点的前一个兄弟节点
- nextSibling 属性---表示当前节点的后一个兄弟节点
（13）、元素节点的属性
获取 ---- 元素对象.属性名
例如：element.value
element.id
element.className
设置 ------元素对象.属性名 = 新的值
例如：element.value = "hello"
element.id = "id01"
element.className = "newClass"
（14）、其他属性
nodeValue ---文本节点可以通过nodeValue属性来获取和设置文本节点的内容
innerHTML ---元素节点通过该属性获取和设置标签内部的HTML代码。
（15）、使用CSS选择器进行查询
querySelector()
querySelectorAll()
这两个方法都是用document来调用的，两个方法使用相同，都是传递一个选择器字符串作为参数，方法会根据选择器字符串去页面上查找元素。
不同的地方是，querySelector() 只会返回查找到的第一个元素，而querySelectorAll() 会返回所有符合条件的元素
（16）、节点的修改
主要是修改元素节点的操作。
- 创建节点：document.createElement(标签名);
- 删除节点： 父节点.removeChild(子节点):
- 替换节点：父节点.replaceChild(新节点,旧节点);
- 插入节点：父节点.appendChild(子节点); 父节点.insertBefore(新节点,旧节点); 方法在参考节点之前插入一个拥有指定父节点的子节点
扫一扫
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
