JS DOM基础

获取DOM元素的方法

• document.getElementById 一个元素对象
• [context].getElementsByTagName 元素集合
• [context].getElementsByClassName 元素集合
• document.getElementsByName 节点集合
• document.documentElement 获取整个HTML对象
• document.body 获取整个BODY对象
• document.head 获取整个HEAD对象
• [context].querySelector 一个元素对象
• [context].querySelectorAll 获取元素集合
  … …

1、getElementById

此方法的上下文只能是document。
一个HTML页面中元素的ID，理论上是不能重复的。
注意一下几点：
1、如果页面中的ID重复了，我们获取的结果是第一个ID对应的元素对象。
2、在IE7及更低版本浏览器中，会把表单元素的name值当做id来识别使用（所以项目中尽量不要让表单的name和其他元素的id值相同）。
3、如果我们把JS放在页面body结构的下面，我们可以直接使用ID值来获取这个元素（不需要通过getElementById来获取了），而且这种方式会把页面中所有相同ID值的元素都获取到（元素对象/元素集合）=> 不推荐。

// 获取页面中ID值为box的所有元素标签
// 1、直接使用box
console.log(box);

// 2、获取所有元素后遍历
var eleList = document.getElementsByTagName("*");
var res = [];
for(var i=0;i<eleList.length;i++){
    var curEle = eleList[i];
    curEle.id === "box" ? res.push(curEle) : null;
}
console.log(res);

// 3、querySelectorAll
console.log(document.querySelectorAll("#box"));
}

2、getElementsByTagName

上下文是可以自己来指定。
获取到的结果是一个元素集合（类数组集合）。
注意几点：
1、获取的结果是集合，哪怕集合中只有一项，我们想要操作这一项（元素对象），需要先从集合中获取出来，然后再操作。
2、在指定的上下文中，获取所有子子孙孙元素中标签名叫做这个tag的（后代筛选）。

3、getElementsByClassName

上下文也可以随意指定。
获取的结果也是一个元素集合（类数组集合）。
注意几点：
1、真实项目中我们经常会通过样式类名来获取元素，但是这个方法在IE6~8浏览器中是不兼容的。

4、getElementsByName

通过元素的name属性值获取一组元素（类数组：节点集合NodeList）。
它的上下文也只能是document。
注意几点：
1、IE浏览器只能识别表单元素的name属性值，所以我们这个方法一般都是用来操作表单元素的。

5、document.documentElement / document.body

获取HTML或者BODY（一个元素对象）。

document.documentElement.clientWidth || document.body.clientWidth; //=>获取当前浏览器窗口可视区域的宽度（当前页面一屏幕的宽度）

// => clientHeight是获取高度

6、querySelector / querySelectorAll

在IE6~8下不兼容，而且也没什么特别好的办法处理它的兼容，所以这两个方法一般多用于移动端开发使用。
querySelector ：获取一个元素对象。
querySelectorAll：获取的是一个元素集合。
CSS选择器支持的上面两个方法都支持，例如：

document.querySelectorAll("body>div");

DOM的节点

node：节点，浏览器认为在一个HTML页面中的所有内容都是节点（包括标签、注释、文字文本等）。

• 元素节点：HTML标签。
• 文本节点：文字内容（高版本浏览器会把空格和换行也当做文本节点）。
• 注释节点：注释内容。
• document文档节点
  …

1、元素节点

• nodeType: 1
• nodeName: 大写的标签名（在部分浏览器的怪异模式下，我们写的标签名是小写，它获取的就是小写，我们写的是大写获取的就是大写）。
• nodeValue: null
• ele.tagName：获取当前元素的标签名（获取的标签名一般都是大写）。

2、文本节点

• nodeType: 3
• nodeName: #text
  -nodeValue: 文本内容

3、注释节点

• nodeType: 8
• nodeName: #comment
  -nodeValue: 注释内容

4、文档节点

• nodeType: 9
• nodeName: #document
• nodeValue: null

节点关系属性

节点是用来描述页面中每一部分之间关系的，只要我可以获取页面中的一个节点，那么我就可以通过相关的属性和方法获取页面中所有的节点。

1、childNodes

获取当前元素所有的子节点（节点集合：类数组）。
注：不仅仅是元素子节点，文本、注释等都会包含在内；子节点说明只是在儿子辈分中查找。

2、children

获取所有的元素子节点（元素集合）。
在IE6-8下获取的结果和标准浏览器中有区别（IE6-8中会把注释节点当做元素节点获取到）。

3、parentNode

获取当前元素的父节点（元素对象）。

4、previousSibling / nextSibling

previousSibling：获取当前节点的上一个哥哥节点（不一定是元素节点，也可能是文本或者注释）。
nextSibling：获取当前节点的下一个弟弟节点。

5、previousElementSibling / nextElementSibling

previousElementSibling：获取当前节点的上一个哥哥元素节点。
nextElementSibling：获取当前节点的下一个弟弟元素节点。
IE6-8下不兼容。

6、firstChild / lastChild

firstChild：当前元素所有子节点中的第一个（也不一定是元素节点，可能是文本和注释）。
lastChild：当前元素所有子节点中的最后一个。

7、firstElementChild / lastElementChild（IE6-8不兼容）。

节点操作：增删改查

举个栗子：

// 需求：给一个URL，解析各部分内容
// 方法：除了字符串截取和正则匹配，还可以在页面创建一个a标签，通过a标签的属性获取相应的url各部分的值。
var link = document.createElement("a");
link.href = 'http://www.zhufengpeixun.cn/stu/?name=zxt&age=27#teacher'; // 此处地址为我们需要解析的URL

/*
* link.hash：存储的是哈希值，'#teacher'。
* link.hostname：存储的是域名，'www.zhufengpeixun.cn'。
* link.pathname：存储的是请求资源的路径名称，'/stu/'。
* link.protocol：协议，'http:'。
* link.search：存储的是问号传递的参数值，没有传递的话为空字符串，'?name=zxt&age=27#teacher'。
* */

// 封装queryUrlParameter方法
function queryUrlParameter(url){
    var link = document.createElement("a");
    link.href = url;
    var search = link.search.substr(1).split(/&|=/g);
    var obj = {};
    if(search.length === 0){
        return ;
    }
    for(var i=0;i<search.length;i+=2){
        var key = search[i];
        var value = search[i+1];
        obj[key] = value;
    }
    link = null;
    return obj;
}

console.log(queryUrlParameter('http://www.zhufengpeixun.cn/stu/?name=zxt&age=27#teacher'));

cloneNode

元素.clonenode(false/true)
把原有的元素克隆一份一模一样的：
false（或者不传参数）：只克隆当前元素本身；
true：深度克隆，把当前元素本身以及元素的所有后代都进行克隆。

[set / get / remove]Attribute()

box.setAttribute(‘myIndex’, 0)
box.getAttribute(‘myIndex’)
box.removeAttribute(‘myIndex’)
注：使用 xxx.index=0 和 xxx.setAttribute(‘index’, 0) 这两种设置自定义属性的区别？
xxx.index=0：是把当前操作的元素当做一个普通对象，为其设置一个属性名为index（和页面中的HTML标签没关系）。
xxx.setAttribute(‘index’, 0) ：把元素当做特殊的元素对象来处理，设置的自定义属性是和页面结构中的DOM元素映射在一起的。

JS中获取的元素对象，我们可以把它理解为两种角色：
1、与页面HTML结构无关的普通对象
2、与页面HTML结构存在映射关系的元素对象

元素对象中的内置属性，大部分都和页面的标签存在映射关系：
xxx.style.backgroundColor = “xxx”
此时不仅把JS对象对应的属性值改变了，而且也会映射到页面的HTML标签上（标签中有一个style行内样式，元素的样式改变了）。

xxx.className = “xxx”
此时不仅是把JS对象中的属性值改了，而且页面中的标签增加了class样式类（可以在HTML结构中看见的）。

元素对象中的自定义属性：xxx.index = 0
仅仅是把JS对象中增加了一个属性名（自定义的index），和页面中的HTML没啥关系（在HTML结构中看不见）。

xxx.setAttribute：通过这种方式设置的自定义属性和之前提到的内置属性差不多，都是和HTML结构存在映射关系的（设置的自定义属性可以呈现在结构上）。