DOC

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对象来获取页面有关的信息

</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]);



![元素关系图](http://upload-images.jianshu.io/upload_images/4166371-f294ca46dda64bef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 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 属性
获取一个元素的父节点

<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
    * 需要插入的新的节点
* 。。。。
* 目标节点

<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（命名空间）
四个方法的空间版

最后编辑于：2017.12.05 15:26:21

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,504评论 6赞 496
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,434评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,089评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,378评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,472评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,506评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,519评论 3赞 413
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,292评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,738评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,022评论 2赞 329
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,194评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,873评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,536评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,162评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,413评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,075评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,080评论 2赞 352

DOC

DOM

概念

推荐阅读更多精彩内容