DOM
一张图告诉你什么是DOC
概念
Document Object Model
- 文档对象模型
- DOW 是针对HTML 和XML 文档的一个api ,
- DOM 中描述了一个层级化的节点树，
- 允许开发人员进行添加，移除和修改页面中的某一部分
- W3C 中的DOM 标准化分为三部分
- 核心DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对XML结构化文档的标准模型
- HTML DOM - 针对HTML 文档的标准模型
- HTML DOM 是关于如何获取，修改，添加 或者删除
- HTML 元素的标准，即操作HTML 元素
- api: 应用程序编程接口
<html>
<head>
<title>DOM</title>
</head>
<body>
</body>
</html>
获取的信息：
- Document 节点是每一个文档的根节点
- Document 节点下 有一个HTML 节点
- 我们将这个节点称为文档元素
- 文档元素是文档最外层的元素，其他的
- 元素都包含在文档元素之中
- 一个文档只能有一个文档元素，在HTML
- 中，文档元素永远是<html>元素
- 在DOW 数中，html文档的每一处标记
- 都可以用树中的一个节点来表示
- html元素标签-元素节点来表示
- 属性-> 属性节点 来表示
- 文档类型-> 文档类型节点 来表示
- 注释-> 注释节点 来表示
- 这部分是作为前期需要做好的铺垫内容
- 通用的 Document 和 Element 类型 与
- HTMLDocument 和 HTMLElement 是有区分的
Document 只代表一个 HTML 或者 XML 文档Element 类型代表的是该文档的一个元素HTMLDocument 和 HTMLElement 子类只针对 HTML 文档 和 元素
DOM 中 节点分类（12种类型）需要记的（需要记住）
可以在网上查到
/*
需要记住的文档类型节点
*
* 1.元素 Node.ELEMENT_NODE
* 2.属性 Node.ATTRIBUTE_NODE
* 3.文本 Node.TEXT_NODE
* 4.注释 Node.COMMENT_NODE
* 5.文档 Node.DOCUMENT_NODE
* */
Node.ELEMENT_NODE //元素
Node.ATTRIBUTE_NODE //元素中的属性
Node.TEXT_NODE //纯文本（没有子节点）
Node.CDATA_SECTION_NODE //子节点是TextNode
Node.ENTITY_REFERENCE_NODE
//文档中的实体引用
Node.ENTITY_NODE
//DTD 中实体定义
Node.PROCESSING_INSTRUCTION_NODE
//一个文档处理程序中
//使用的特有指令
Node.COMMENT_NODE
//注释
Node.DOCUMENT_NODE
//最外层的 根节点
Node.DOCUMENT_TYPE_NODE
//文档类型定义
Node.DOCUMENT_FRAGMENT_NODE
//更小型的 Document 节点
//定义这个数据类型主要是为
//了方便只希望提取文档的
//某一部分时使用
Node.NOTATION_NODE
//DTD 的 Nation 定义
//在 XML 文档中表示一个符号
节点属性
1. nodeName
节点名称
* nodeName 是只读的
* nodeName 始终包含HTML 元素的大小写字母 标签名
2. nodeValue
节点
或者进行设置或返回节点的值
3. nodeType
节点的类型
## DOM核心对象-document 对象
JS 中是通过Document 类型来表示文档
在浏览器中，document 的对象是HTMLDocument
表示整个HTML界面
而且document 对象是 window对象各个属性
我们可以将其当做全局对象来访问
nodeType: 9（上面的内容第九个）
nodeName: #document
nodeValue: null
parentNode:null（父节点）
ownerDocument:null (根元素节点)
## 获取节点
document对象来获取页面有关的信息
<body>
<h1>我是标题</h1>
<script>
document.getElementById("myH1");//获取节点
console.log(h1.id); // 元素的id
console.log(h1.className);// 元素的class
console.log(h1.innerHTML);// 元素的HTML文本
</script>
1. 使用该方法一定不要查找多个id
2. 如果有多个相同的id,则只会返回一个元素
3. 在低于IE 8 的版本，对匹配元素的ID不区分大小写
var h1s =
document.getElementById("h1");
console.log(h1s);
for(var i = 0;i < h1s.length;i++){
console.log(h1s[i].id);//获取id
console.log(h1s.item(i).id);//获取id
console.log(h1s[i].id);//获取id
}
该方法是根据标签名称来获取元素节点
* 因为一个文档中可能出现多个标签
* 所以该方法返回的是多个Element组成的集合
* 尽量使用getElementById()
*
### NodeList 对象（NodeList: 节点列表）
类数组集合
* 返回的是一个只读 类数组对象
* 他们拥有length属性
* 也可以像数组一样索引
## 获取元素
写from 标签的时候
一个内容，如果多个用input表单
<body>
<from ..>
<input type=""name=""id=""value=""/>洗澡
<input type=""name=""id=""value=""/>喝水
<script ..>
var name =
document.getElementsByName("input_name");
for(var i = 0;i<name.length;i++){
console.log(names[i].value)
}
</script>
是通过标签的name 属性的值来获取元素
可能出现多个相同的name值，
所以返回是一个Element 组成的集合
有严重的兼容性问题，
在IE中
## 获取元素querySelector(CSS 的选择器)
<title>Document</title>
</head>
<body>
<p id="demo"></p>
</body>
<script ..>
var p_1 = document。querySelector("#demo");
console.log(p_1);
对应一个选择器,特别好用
### querySelector(CSS 的选择器)
参数;
* CSS 选择器
* 指定一个或者多个匹配的CSS 选择器
* id，class，类型 属性
* 返回值
<body>
</body>
<script>
var p_1 =
document.querySelector(".id")
### querySelectorAll()
返回所有匹配的元素
HTML5 中引入的
返回不是实时，返回的是调用时刻所匹配的内容
* ：hover、：visitited 去访问到用户的浏览器习惯等
* 很多浏览器会直接拒绝使用这个内容
<body>
快捷方式
</body>
<script..>
var all = document.querySelectorALL(".p_1");
console.log(all);
console.log(all.length);
console.log(all[1]);
### 6_Note 获取操作
元素关系
1. 父元素
2. 子
3. 兄弟关系
4. 父子关系
1. 父节点 （parent)
* 父节点拥有任意数量的子节点
2. 子节点 （child）
3. 兄弟节点（sibling）
* 自己百度吧 有图 节点操作
4. 根节点 （root）
* 根节点不可能有父节点
* 只能存在一个
* 一个文档中的“源头”
### 7_childNodes.html
childNodes
* 获取一个元素的所有的子节点
* 返回值是一个数组
* 只获取子节点，不能获取到子节点的子节点
<body>
<div id="div">//获取拓展时会再说，有问题，但可以看到
<a href="###">简书</a>
</div>
div>
<a href="###">有道云</a>
</div>
div>
<a href="###">微博</a>
</div>
<script ..>
var nodes =
document.getElementById("div").childNodes;
console.log(nodes);
for(var i=0;i<nodes.length;i++){
console.log(nodes[i].n...
}
firstChild 属性
* 获取元素的第一个子节点
如果选定的节点没有子节点，
则直接返回null
var div = document.getElementById("div");
//获取第一个子节点
var firstChild = div.firstChild;
console.log(firstChild);
console.log(firstChilld.nodeName);
var lastChild=
可以写函数判断，也可以通过挪动下位置
## 8_parentNode 属性
获取一个元素的父节点
<body>
<div id="div">
<a href="###">搜狐</a>
<sc..>
var div = document.getElementById("div");
var node_1 = div.parentNode；
console.log(node_1)
....
图面展示...
## previousSibling
获取一个元素的上一个兄弟节点
var div1 =document.getElementById("div1");
var previousSibling = div1...
跟上一部分是相关的。
找到它的上一个兄弟。
## nextSibling
获取一个元素的下一个兄弟节点
var nextSling = div1.nextSibling;
console.log(nextSibling)
拓展：
1. 获取一个节点所在的文档的根节点
元素节点名称.ownerDocument
实际上相当于当前整个文档节点
2. 获取当前节点所有的属性节点
元素节点名称。attributes；
console.log(div1.attributes)
# 9_关于获取元素的拓展（比较重要）
在IE 9 以下，当前内容通过alert()弹出当前
节点的 firstChild 实际上应该为 p
但是在现代浏览器中，比如 Chrome , FF iell 等等
将会<div> </div>之间的空白节点也解析出来
所以通过alert 弹出的 #text
因为空白节点也是属于text 文本节点
但是如果将多个标签中的空白内容删除
在不同浏览器，来去解决这个问题
function getFirst(elem){
for(var i = 0,e; e = elem.chilNodes[i++];){
if(e.nodeType ==1){
return e;
}//做判断
}
}
var first =
document.getElementsByTagName("div")[0];
console.log(first);
我们经常会选择区用一个方法直接获取父元素的
第一个节点，
DOM中直接拓展了一个新的方法
farstElementChild
console.log(farstElementChild);
但是，拓展的方法 farstElementChild
在现代浏览器中兼容，但是在IE6/7/8中
没有该方法
一旦使用会报错
children
不是标准属性，返回指定元素的子元素集合
但是它只返回HTML节点，甚至不会返回文本节点
虽然不是标准DOM，但是和innerHTML，一样，等到了几乎所有浏览器支持
和childNodes 一样，在Firefox 中不支持
直接
console.log(farst children[0]);
nextSibling --> farstElementChild
lastChild --> lastElementChild
nextSibling --> farstElementChild
previousSibling --> previousElementChild
## 修改：
1. 创建文本节点
createTextNode()
1. createTextNode(text)
创建文本节点
2. 添加一个child 元素 appendChild()
3. 创建一个新的元素节点createElement()
4. 在一个节点之前插入新的节点insertB..
5. 移除子节点
6. 替换子节点
7. 克隆节点
var textNode = document.createTextNode("谢聃");
console.log(textNode.nodeName);
console.log(textNode.nodeV..e);
appendChild(node)
参数：
* node
* 需要添加的节点
* 必选参数
* 返回值：
* 参数对象本身
* append翻译过来是 追加
* 。。
var div = document.getElementById("div");
div.app..(textNode);
createElement(nodeName)
创建一个元素节点
* 参数：
* nodeName
* 需要创建元素的名称
* 返回值：
* 创建的元素节点
var newElement = document.createElement("a");
insertBefore(newNode,existingNode)
在一个节点前面插入一个新的节点
参数：
* newNode
* 需要插入的新的节点
* 。。。。
* 目标节点
<div id= "div"></div>
<ul id="language">
<li>java</li>
<li>c#</li>
</ul>
<buttom onclick="此处填写相应的英文（）"
<buttom onclick="cloneNode(deep)">克隆</buttom>
<sc..>
function addNode(){
var newItem=
document.createElement("li");
}
removeChild(node)
移除子节点
参数：
* node
* 必选参数
* 需要移除的子节点
function removeNode(){
var languageList = document.getElementById("language");
var li_List = languageList.getElementsByTagName("li");
console.log(li_List);
languageList.removeChild(li_List[0]);
console.log(li_List.length);
}
获取相应的节点,然后在移除
调用，button 小按钮 在上面的 <body>
function addNode(){
var newItem = document.createElement("li");
var textNode_2 = document.createTextNode("JavaScript");
newItem.appendChild(textNode_2);
var languageList = document.getElementById("language");
//将 newItem 添加到 language 列表中
languageList.insertBefore(newItem,languageList.firstChild);
}
替换子节点
replaceChild(newNode,oldNode)
参数
* newNode
* 新节点
* oldNode
* 旧节点
function replaceNode(){
var languageList = document.getElementById("language");
var newLi = document.createElement("li");
newLi.innerHTML = "NodeJS";
//使用新的节点替换旧的节点
languageList.replaceChild(newLi,languageList.childNodes[0]);
}
克隆节点
cloneNode(deep)
* 该方法可以用于创建指定的节点的精确拷贝
* 拷贝所有的属性和属性值
该方法将赋值并返回它的节点的副本
function cloneNode(){
var languageList =
documment.getElementById("language");
var newList.cloneNode(ture)
}
完整代码
function cloneNode(){
var languageList = document.getElementById("language");
//克隆整个 languageList 节点
//传入的参数如果为 true
//则代表深拷贝
//所有的子节点都 copy 下来
var newList = languageList.cloneNode(true);
document.getElementsByTagName("body")[0].appendChild(newList);
}
## 元素属性操作
### 1. 获取属性值 getAttibute()
attributName
* 获取元素的某个属性名称
* id、classname
* 返回值：
* 获取指定属性的属性值
<body>
<a href="http://www.baidu.com" id = "a_id"
target=""
<sc..>
function getShuXing(){
var a = document.getElementById("a_id");
console.log("id = " + a.getAttribute("id") + "\ntarget = " + a.getAttribute("target"));
}
### 2. 设置属性值 setAttibute()
作用：
* 创建或者更改某个值
* 如果存在，则设置该值就可
* 不存在，则创建该属性并设置该属性值
function setShuXin(){
var a = document.getElementById("a_id");
a.setAttribute("href","http://www.yztcedu.com");
}
将百度已换成育知同创
### 3. 移除属性值.. retAttibute()
AttributName
* 必选参数
* 需要移除的属性名称
function removeShuXin(){
var a = document.getElementById("a_id");
a.removeAttribute("target");
}
### 4. 检查是否包含某个属性 hasAttribute()
hasAttribute()
* 检查是否包含某个属性
去前面方法的需要检查的名称
返回值为ture/false
判断
console.log(document.getElementById("a_id").hasAttribute("target"));
如果操作中包含来自其他空间属性的XML文档的时候，在当前四个方法后面+NS（命名空间）
四个方法的空间版
网友评论