比较实用的js方法

image.png

1获取元素

querySelector和querySelectorAll是W3C提供的[ 新的查询接口](http://www.w3.org/TR/selectors-api/#nodeselector)，其主要特点如下：**

1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。 

2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。 

3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。 

这两个方法都可以接受三种类型的参数：id(#)，class(.)，标签，很像jquery的选择器。

var obj = document.querySelector("#id");
var obj = document.querySelector(".classname");
var obj = document.querySelector("div");
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
var elements = document.querySelectorAll("#score>tbody>tr>td:nth-of-type(2)");
var elements = document.querySelectorAll("#id1, #id2, .class1, class2, div a, #list li img");

目前IE8+，ff，chrome都支持此api</pre>

[http://www.runoob.com/jsref/met-document-queryselector.html](http://www.runoob.com/jsref/met-document-queryselector.html)

原生JS添加类名 删除类名 检查是否含有某个CSS类名

1 为 <div> 元素添加 class:
document.getElementById("myDIV").classList.add("mystyle");

2为 <div> 元素添加多个类:
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

3为 <div> 元素移除一个类:
document.getElementById("myDIV").classList.remove("mystyle");

4为 <div> 元素移除多个类:
document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

5检查是否含有某个CSS类
myDiv.classList.contains('myCssClass'); //return true or false

3获取距离页面的距离getBoundingClientRect（）

image.png

自己写一个元素定位,可以测试一下,是相对于页面的可视区域

var sm = document.getElementById("km")
let kmt = sm.getBoundingClientRect()
console.log("------1---")
console.log("top",sm.getBoundingClientRect().top); // 元素上边距离页面上边的距离
console.log("right",sm.getBoundingClientRect().right); // 元素右边距离页面左边的距离
console.log("bottom",sm.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
console.log("left",sm.getBoundingClientRect().left); // 元素左边距离页面左边的距离
console.log("-----2----")