获取元素的方法
要操作谁，就要先获取谁；
获取元素
1、document.getElementById:通过ID名来获取元素
兼容性： 在IE8以下，会默认把name属性当做id来获取；document : 文档；上下问必须是documentget : 获取element : 元素By : 通过Id : ID名字；id 是唯一的；不能重复
var oBox = document.getElementById("box");// {className:"",style:{}}var oBox1 = oBox.getElementById("box1");var a = document.getElementById("a");console.log(a);console.log(oBox);console.log(typeof oBox);// "object"oBox.style.background = "red"; 2、document.getElementsByTagName: 通过标签名来获取元素
是一个类数组集合
var arr = oBox.getElementsByTagName("span");// "标签名"[{style:{}]arr[0].style.background = "red";console.log(arr); 3、document.getElementsByClassName(); 类数组集合；
IE8及以下是不兼容的；通过class名字来获取元素；
var a = document.getElementsByClassName("box");console.log(a.length);console.log(a); 4、document.getElementsByName;通过name属性来获取元素；
在IE9及以下，会默认把id名是a的获取到；
var inputs = document.getElementsByName("a");console.log(inputs); 5、document.documentElement 获取当前的html
console.log(document.documentElement);var htm = document.getElementsByTagName("html")console.log(htm); 6、body :获取页面的body元素；
console.log(document.body);获取当前浏览器可视窗口高度和宽度
var winW= document.documentElement.clientWidth || document.body.clientWidth;var winH = document.documentElement.clientHeight || document.body.clientHeight;console.log(winW);console.log(winH);
7、document.querySelector();
var divs = document.querySelector(".box");// 如果是id名，前面需要加一个#;如果是class,要加一个.console.log(divs); 8、document.querySelectorAll();
// querySelectorAll: 获取所有的元素；var divs = oBox.querySelectorAll("div")console.log(divs);
DOM的节点和属性
DOM的节点 ： 四种类型的节点；
| TYPE | nodeType | nodeName | nodeValue |
| 元素节点 | 1 | 大写的标签名 | null |
| 文本节点 | 3 | text | 文本内容 |
| 注释节点 | 8 | comment | 注释内容 |
| document | 9 | document | null |
空格和换行都是文本节点；
节点的属性
1、childNodes : 获取当前元素所有的子节点；
console.log(parent.childNodes);parent.childNodes[1].style.width="100px";
2、children : 获取当前元素的子元素节点；
3、firstChild : 获取第一子节点；
firstElementChild : 第一个子元素节点； 在IE8及以下，是不兼容的；
4、lastChild :获取最后一个子节点
lastElementChild : 最后一个子元素节点；在IE8及以下，是不兼容的；console.log(parent.firstChild);console.log(parent.firstElementChild);
5、 previousSibling : 获取上一个哥哥节点
previousElementSibling 封装var last = document.getElementById("last");// 获取上一个哥哥的元素节点；function getBrother(curEle) {var pre = curEle.previousSibling;while(pre){if(pre.nodeType ===1){ //不满足，说明不是一个元素；return pre;}pre = pre.previousSibling;}return pre;}getBrother(sec);getBrother(last) 6、 nextSibling : 获取下一个弟弟节点
nextElementSibling : 获取下一个元素弟弟节点；console.log(sec.previousSibling);
7、parentNode: 获取当前元素的父亲节点；
console.log(sec.previousSibling);console.log(sec.parentNode.previousElementSibling);var body =document.body;document 没有父亲节点；如果没有获取结果就是null；console.log(body.parentNode.parentNode.parentNode);
动态操作DOM的方法
oBox.innerHTML = "函数很重要";
1.document.createElement;创建元素
var newDiv = document.createElement("div");console.log(newDiv); 2.appendChild : 向元素的末尾添加子节点；
父级.appendChild(儿子)oBox.appendChild(newDiv);//Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'var div = document.getElementsByTagName("div")[1]; 3.removeChild : 删除子节点；
oBox.removeChild(div);var span = document.createElement("span") 4.replaceChild : 替换节点；
父级.replaceChild(newChild,oldChild);oBox.replaceChild(span,div);
5.insertBefore :把元素节点插入某个节点的前面
父级.insertBefore(newChild,oldChild)oBox.insertBefore(span,div);
6.cloneNode : 复制节点；
// 参数： true： 深克隆，会当前元素以及子孙节点全部获取到// false或不传 : 浅克隆，只会克隆当前元素节点；console.log(oBox.cloneNode(true));console.log(oBox.cloneNode());var a = document.getElementsByClassName("a")[0];var b = a.cloneNode(true);oBox.appendChild(a); 7. set/get/remove Attribute : 设置自定义行内属性；
//getAttribute 不能获取通过元素.属性 = 属性值这种方式新增的属性；可以获取行内直接设置的，还有通过setAttribute 来设置的属性；div.setAttribute("name","time");div.index = 100;console.log(div.name);// undefineddiv.setAttribute("na","ti")如果获取不到自定义行内属性，结果就是null；console.log(div.getAttribute("name"));console.log(div.getAttribute("index"));console.log(div.getAttribute("hh"));// 移出行内属性div.removeAttribute("na");