原生js相关操作

document.querySelector默认获取第一个  document.querySelectorAll取所有

1,根据id, document.getElementById("")   document.querySelector("#")

2,根据class, document.getElementsByClassName("");数组   document.querySelector(".")   document.querySelectorAll(".")

3,根据name, document.getElementsByName("");数组

4,根据标签,节点, document.getElementsByTagName("");数组

5,查找子节点, obj.childNodes,数组  

children ：返回一个实时的 HTMLCollection ，子节点都是Element，IE9以下浏览器不支持；

childNodes ：返回一个实时的 NodeList ，表示元素的子节点列表，注意子节点可能包含文本节点、注释节点等；

firstChild ：返回第一个子节点，不存在返回null，与之相对应的还有一个 firstElementChild ；

lastChild ：返回最后一个子节点，不存在返回null，与之相对应的还有一个 lastElementChild

6,查找父节点, obj.parentNode,数组

parentNode ：每个节点都有一个parentNode属性，它表示元素的父节点

5,查找前一个兄弟节点, obj.previousSibling

5,查找后一个兄弟节点, obj.nextSibling

6,创建元素  createElement

1. // 原生方法   
2. var elem = document.createElement("div"); 
3. elem.className = 'test guoxin'; 
4. elem.style = 'color: red,height:100px'; 
5. elem.innerHTML = '我是新创建的节点'; 
6. document.body.appendChild(elem); 

7,创建文本节点  createTextNode

- var node = document.createTextNode("我是文本节点");

- document.body.appendChild(node);

8,替换节点

parent.replaceChild(newChild, oldChild);

9， getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null：

var value = element.getAttribute("id");

10，直接修改元素的样式

elem.style.color = 'red';

elem.style.setProperty('font-size', '16px');

elem.style.removeProperty('color');

,11，动态添加样式规则

var style = document.createElement('style');

style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';

document.head.appendChild(style);

12，getBoundingClientRect 用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下：

element.getBoundingClientRect();