### DOM数

> dom tree

> 当浏览器加载HTML页面的时候，首先就是DOM结构的计算，计算出来的DOM结构就是DOM树（把页面中的HTML标签像树状结构一样，分析出之间的层级关系）

window

document

html

head                             body

meta title link  style..    div ul li script

DOM树描述了标签和标签之间的关系（节点间的关系），我们只要知道任何一个标签，都可以依据DOM中提供的属性和方法，获取到页面中任意一个标签或者节点

### 在js中获取DOM元素的方法

“ getElementById ”

>通过元素的ID获取指定的元素对象，使用的时候都是“document.getElementById('')” 此处的document是限定了获取元素的范围，我们把它称为“上下文（context）”

强调点：

1.getElementById的上下文只能是document

-因为严格意义上，一个页面中的ID是不能重复的，浏览器规定在这个文档中既可以获取这个唯一的ID

2.如果页面中的ID重复了。我们基于这个方法只能获取到第一个元素，后面相同ID元素无法获取到

3.在IE6-7浏览器中，会把表单元素（input...）的name属性值当作ID来使用（建议：使用使用表达元素的时候，不要让name和id值有冲突）

“ getElementsByTagName ”

’[context].getElementsByTagName‘在指定的上下文中，根据标签名获取到一组元素集合（HTMLCollection）

强调点：

1.获取的元素集合点是一个类数组（不能直接的使用数组中的方法）

var oBox = document.getElementById('box'),

HTMLCollection = oBox.getElementsByTagName('div')

2.他会把当前上下文中，子子孙孙（后代）层级内的标签都获取到（获取的不仅仅是儿子级的）

3.基于这个方法获取到的结果永远都是一个集合（不管里面的是否有内容，也不管有几项，它是一个容器或者集合），如果想操作集合中具体的某一项，需要基于索引获取才可以 ....

“ getElementsByClassName ”

'[context].getElementsByClassName()'在指定的上下文中,基于元素的样式类名(class="xxx")获取一组元素集合

强调点：

1.真实项目中,我们经常基于样式类来给元素设置元素,所以在js中,我们也会经常基于样式类来获取元素,但是此方法在IE6-8下不兼容

“ getElementsByName ”

"document.getElementsByName()"它的上下文也只能是document,在整个文档中,基于元素的name属性值获取一组节点集合(也是一个类数组)

前调点:

1.在IE浏览器中(IE及以下版本),只对表单的name属性起作用(正常来说,我们项目中只会给表单元素设置name,给非表单元素name,其实是一个不太符合的设计)

“ querySelector ”

'[context].querySelector()' 在指定的上下文中基于选择器(类似于css选择器)获取到指定的元素对象(获取的是一个元素,哪怕选择器匹配了多个,我们之获取一个)

“ querySelectorAll ”

在querySelectorAll的基础上,我们获取到选择器匹配到的所有元素,结果是一个基点集合(nodeList)

强调点：

querySelector/querySelectorAll都是不兼容IE6-8浏览器的(不考虑兼容的情况下,我梦能用byID或者其他方式获取的,也尽量不要用这两个方法,这两个方法性能消耗比较大)

document.querySelector("#HAHA")

document.querySelectorAll("#HAHA")

document.querySelectorAll('.box>div')

document.querySelectorAll('.box>div')

document.querySelectorAll('[name="hobby"]')

“ document.head ”

获取HEAD元素对象

“ document.body ”

获取BODY元素对象

“ document.documentElement ”

获取HTML元素对象

```javascript

//=>需求: 获取浏览器一屏幕的宽度和高度(兼容所有的浏览器)

document.documentElement.clientWidth ||

document.body.clientWidth

document.documentElement.clientHeight ||

document.body.clientHeight

```

### 面试题:获取当前页面中所有ID为HAHA的元素(兼容所有浏览器)

```javascript

//=>不能使用querySelectorAll

/* 思路

* 1.首先获取当前文档中所有的HTML标签

* 2.依次遍历这些元素标签对象,谁的ID等于HAHA,我们就把谁存储起来即可

*/

```

function queryAllById(id){

    var nodeList = document.getElementsByTagName('*'); //=>基于通配符*获取到这个文档中所有的标签

    // =>遍历集合中的每一项,把元素ID和传递ID相同的这一项存储起来

    var ary = [];

    for(var i = 0;i<nodeList.length;i++){

        var item = nodeList[i]

        item.id === id ? ary.push[item]:null

    }

    return ary;

}

queryAllById("HAHA");

console.log(HAHA);  //在js中,浏览器中会自动把元素的id拿过来当变量用(不需要自己获取设置,而且ID重复,获取的结果就是一个集合,包含所有ID项,不重复就是一个元素对象(类似ById获取的结果))

节点与描述节点之间的属性

### 节点（node）

>在一个HTML文档中出现的所有东西的都是节点

>元素节点（HTML标签）

>文本节点（文字内容）

>注释节点（注释内容）

>文档节点（document）

每一种类型的节点都会有一些属性区分自己的特点和特征

-nodeType： 节点类型

-nodeName： 节点名称

-nodeValue： 节点值

```元素节点

nodeType：1

nodeType：大写标签名

nodeValue：null

```

``` 文本节点

nodeType：3

nodeName："#text"

nodeValue：文本内容

在标准浏览器中，浏览器都会把空格，换行当作文本节点处理

```

``` 注释节点

nodeType：8

nodeName："#comment"

nodeValue：注释内容

```

``` 文档节点

nodeType：9

nodeName："#document"

nodeValue：null

### 描述节点关系的属性

" parentNode "

> 获取当前节点唯一的父亲节点

" childNodes "

> 获取当前元素的所有子节点

> -子节点：只获取儿子级别的

    -所有：包含元素节点，文本节点等

" children "

> 获取当前元素所有的元素子节点

>在IE6-8中注释节点也当作元素节点来获取到，所有兼容性不好。

" previousSibling "

> 获取当前节点的上一个节点（获取的哥哥可能是元素也可能是文本等）

> previousElementSibling ：获取上一个哥哥元素节点（不兼容IE8）

" nextSibling "

> 获取当前节点的下一个弟弟节点

> nextElementSibling: 下一个弟弟元素节点（不兼容IE8）

" firstChild "

> 获取当前元素的第一个子节点（可能是元素或文本等）

> firstElementChild 获取第一个元素节点

" lastChild "

> 获取当前元素的最后一个子节点

> lastElementChild 获取当前元素的最后一个子元素节点

```

// 需求一： 获取当前元素的所有元素子节点

// 基于children不兼容IE低版本浏览器（会把注释当作元素节点）

/*

* chikdren: 获取当前元素所有的元素子节点

*  @parametet:

* curEle: [object]current elemrnt

*  @return

*  [array]all the element nodes

* by team on 2018

*/

function children(curEle){

    var result = [],curEle = curEle.childNodes;

    for(var i = 0;i<curEle.length;i++){

        if(curEle[i].nodeType==1){

            list.push(curEle[i])

        }

    }

    return result;

}

console.log(children(course))

// 需求：获取当前元素的上一个哥哥元素节点

// > previousElementSibling不兼容

/* prev：获取当前元素的上一个哥哥元素节点

* @parameter

* curEle: [object]

* @return

* [object] last elder brother element

*  by skl on 2019

*/

function prev(curEle){

    //=》先找当前元素的哥哥节点，看是否为元素节点，不是基于哥哥找哥哥的上一个节点。。。一直找到元素节点或者没有哥哥了（说明我就是老大），则结束查找

    var pre = curEle.previousSibling;

    while(pre && pre.nodeType!==1){

    /*

        * pre && pre.nodeType!==1

        *  pre是验证还有木有，这样写代码有，没有pre是null

        *  pre.nodeType是验证是否为元素

    */

       pre = pre.previousSibling;

    }

    return pre;

}

```

扩展：

next下一个弟弟元素节点，

prevAll获取所有哥哥元素节点，

nextAll获取所有弟弟元素节点

silbings获取所有兄弟节点，

index获取当前元素的索引...

### DOM增删该查

"

createElement

> 创建一个元素标签（元素对象）

> `document.createElement([标签名])`

appendChild

> 把一个元素对象插入到指定容器的末尾

> `[container].appendChild([newEle])`

insertBofore

> 把一个元素对象插入发哦指定容器中某一个元素标签之前

> `[container].insertBofore([newEle]，[oldEle])`

cloneNode

> 把某一个节点进行克隆

> `[curEle].cloneNode()`: 浅克隆，只克隆当前标签

> `[curEle].cloneNode(true)`：深克隆，当前标签及其里面的内容都一起克隆了

removeChild

> 在指定容器中删除每一个元素

> `[container].removeChild([curEle])`

set/get/removeAttribute

设置/获取/删除 当前元素的某一个自定义属性值（两种方法）

···javascript

var oBox = document.getElementById('box');

// 1.=> 把当前元素作为一个对象，在对象对应的堆内存新增一个自定义属性

    //增加

        oBox.myIndex = 10;

    //获取

        console.log(oBox['myIndex'])

    //删除

        oBox.myIndex = null;

        delete oBox.myIndex

// 2.=> 基于Attribute等DOM方法完成自定义属性的设置

    // 设置

        oBox.setAttribute('myColor','red');

    // 获取

        oBox.getAttribute('myColor');

    // 删除

        oBox.removeAttribute('myColor');

上下两张机制属于独立的运作机制，不能互相混淆使用

- 第一种是基于对象键值对操作方式，修改当前元素对象的堆内存空间来完成

- 第二种是直接修改页面中HTML标签的结构来完成的（此种方法设置的自定义属性可以在结构上呈现出来）

-基于setAttribute设置的自定义属性值都是字符串

···

"

### 案例

/*

* 需求：解析一个URL字符串问号传参和HASH

*/

// 解析a标签href

function queryURLParameter(str){

    // 1.创建一个A标签，把需要解析的地址当作A标签的HREF赋值

        var link = document.createElement('a');

        link.href = str;  //页面中不需要展示A，我们只是想要利用它的属性而已，所以无需添加到页面

    // 2.A元素对象的HASH/SEarch两个属性分别存储了哈希值和参数值

        var search = link.search.substr(1);

        var hash = link.hash.substr(1);

    // 3.分别解析出HASH和参数即可

        var obj = {};

        hash?obj.HASH=hash: null;

        if(search){

            console.log(search)

            var list = search.split('&');

            for(var i = 0;i<list.length;i++){

                var arrChildlist = list[i].split('=')

                obj[arrChildlist[0]] = arrChildlist[1]

            }

    }

    return obj;

}

var str = 'https://www.baidu.com?lx=1&name=AA&age=1#teacher'

queryURLParameter(str)