05-17,2019

原生JS总结

前言

由于在活动期间，没使用关于js的第三方的库，用原生JS实现活动前端的逻辑，对一些原生函数存在不了解或者忘记的地方进行记录

原生DOM操作函数和属性

事件

addEventListener()

addEventListener()将指定的事件监听器注册到目标对象上，当目标对象触发制定的事件时，指定的回调函数就会触发。目标对象可以是文档上的元素、 document、 window 或者XMLHttpRequest(比如onreadystatechange事件)。

IE8及以下不支持此方法且只有事件冒泡没有事件捕获。IE9开始支持此方法，也就有了事件捕获。

该方法需要传递三个参数：第一个参数是事件名，第二个参数是回调函数，第三个参数为true表示捕获，false表示冒泡。

let div = document.querySelector('#div');
div.addEventListener('click',function (e) {
  console.log('hello world')
},true/false)

removeEventListener()

这个事件是用来移除已绑定的事件，与addEventListener()绑定事件对应的就是移除已绑定的事件。第三个参数的布尔值代表解绑的是捕获事件还是冒泡事件。两个事件互不相关。

var div = document.querySelector("#div"); 
div.addEventListener("click", listener, true);
function listener() {
    console.log('hello world');
}
div.removeEventListener("click", listener, true);

注意：只能通过removeEventListener()解绑有名字的函数，对于绑定的匿名函数无法解除绑定。

var div = document.querySelector("#div"); 
div.addEventListener("click", function(e) {
  console.log('hello world');
  console.log(this) // 注意：这里this指向触发事件的元素自身。
}, true);
div.removeEventListener("click", function () {
  console.log('remove hello world');
}, true);

div.onclick = null;
// 点击div依然打印出hello world

attachEvent()、detachEvent()

IE8及以下使用这两个方法绑定和解绑事件，当然，IE9+也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。

let div = document.querySelector("#div"); 
div.attachEvent("onclick",listener);// 注意事件名需加上on
function listener() {
  console.log('hello world');
  console.log(this); // 注意：这里this指向window。
}
div.detachEvent("onclick",listener)

同时只能通过detachEvent()解绑有名字的函数，对于绑定的匿名函数无法解除绑定。

阻止默认事件和冒泡

标准事件和IE事件中的阻止默认事件和冒泡事件也有很大区别。

let div = document.querySelector("#div"); 
if(div.addEventListener) {
  // 用于标准事件
  div.addEventListener("click", function(e) {
    e.preventDefault(); // 阻止默认事件
    e.stopPropagation(); // 阻止冒泡
    console.log(e.target.innerHTML);
  }, false);
}else{
  // 用于IE事件
  div.attachEvent("onclick", function() {
    var e = window.event;
    e.returnValue = false; // 阻止默认事件
    e.cancelBubble = true; // 阻止冒泡
    console.log(e.srcElement.innerHTML);
  });
}

IE8及以下的event是绑定在window上的。

创建元素

创建元素：document.createElement()

使用document.createElement()可以创建新的元素，这个方法接收一个标签名。这个标签名在HTML文档中不区分大小写，在XHTML中区分大小写。

1	let div = document.createElement('div');

同时可以对元素添加自身的属性：

1 2	div.id = "myDiv"; div.className = "div_bg";

虽说创建了元素，但是此元素还没添加到文档里面去，我们可以使用appendChild()、insertBefore()等

创建文本元素：document.createTextNode()

使用document.createTextNode()来创建文本节点，这个方法接受一个参数：要插入节点的文本。与设置已有文本节点的值一样，作为参数的文本将按照HTML或XML的格式进行编码。

1	document.createTextNode('helloWorld')

DOM节点操作

appendChild()

appendChild()用于向childNodes列表的末尾添加一个节点，并且返回这个新增的节点。

1	var child = document.body.appendChild(child);

注意：child 既是参数又是返回值

insetBefore()

insetBefore()可以将插入到指定的位置。该方法有两个参数：一个是将要插入的节点，另一个是作为参照的节点。插入节点后，被插入的节点变成参照节点的前一个同胞节点，同时被方法返回。如果参照节点是null，则与appendChild()执行相同的操作。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);
// insertedNode 已经经过插入newNode的新的节点
// parentNode 新插入节点的父节点
// referenceNode 参照节点

替换节点： replaceChild()

replaceChild()可以用于节点替换，该方法有两个参数：要插入的节点和被替换的节点，被替换的节点将会在文档中删除掉，同时返回被替换的节点，插入的节点占据被替换节点的原来的位置

1	var oldNode = parentNode.replaceChild(newNode, oldNode);

删除节点：removeChild()

removeChild()可以用于删除节点，该方法只有一个参数：需要删除的节点，从DOM中删除一个子节点，返回删除的节点。

1
2
3

let oldChild = node.removeChild(child);
// node 是child的父节点
// oldChild === child

克隆节点：cloneNode(true/false)

removeChild()用于复制节点，该方法只有一个参数：是否需要深度克隆的状态，返回调用该方法的节点的一个副本.

1
2
3

let dupNode = node.cloneNode(deep);
// node 将要被克隆的节点
// deep 是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.

元素选择操作

querySelector、querySelectorAll(IE8及以上)

getElementById()

通过元素的ID来获取元素本身，由于id在html文档中是唯一的。同时该元素返回一个匹配特定ID的元素，id不存在，返回null.

1	let div = document.getElementById("div");

getElementsByTagName()

通过元素的标签名来获取元素节点，同时该元素返回含有同一个元素标签名的节点集合（HTMLCollection）

1	let live = document.getElementsByTagName("p"); // 返回的元素是一个类数组

getElementsByName()

通过所有name属性匹配来获取元素节点，同时该方法返回含有同一个name属性名的元素节点集合（HTMLCollection）

1	let live = document.getElementsByName("div"); // 返回的元素是一个类数组

getElementsByClassName()

该方法返回一个即时更新的（live） HTMLCollection，包含了所有拥有指定 class 的子元素。当在 document 对象上调用此方法时，会检索整个文档，包括根元素。(IE9以下不支持)

要匹配多个class，则className用空格分开。

1	let live = document.getElementsByClassName("class1 class2"); // 返回的元素是一个类数组

属性操作

setAttribute()

用于在元素上添加一个新的属性，或者改变已存在属性的值。

1
2
3

let div = document.getElementById("div");
div.setAttribute("class", "new_class");
div.setAttribute("id", "new_id");

getAttribute()

用于获取元素上的指定属性，该方法只有一个参数，指定的属性名；如果指定的属性不存在，则返回 null 或 “” （空字符串）（IE5+都返回null）。

1
2
3

let div = document.getElementById("div");
let attr = div.getAttribute("class");
console.log(attr);

注意:IE7下不能正确返回class，返回的是null，其他正常。

removeAttribute()

该方法用于移除元素的属性。

1 2	let div = document.querySelector('#div'); div.removeAttribute('class')

注意:IE7下无法移除 class 属性

hasAttribute()

用于判断该元素是否含有该属性，返回一个boolean值。

注意:IE7不支持该方法。

自定义属性data-*

这个是H5上包含data-*的自定义属性，

1 2	let div = document.querySelector('#div'); let id = div.dataset.id // 获取元素上的data-*的data-id的值

文章外补充

getComputedStyle()、currentStyle()

当我们想获取元素计算后实际呈现在页面上的各个值，就用这两个方法。IE8及以下用currentStyle(),IE9+及其他标准浏览器用getComputedStyle()。

var div = document.getElementById("div");
var result = "";
if (window.getComputedStyle) {
  result = (window || document.defaultView).getComputedStyle(div, null)['cssFloat'];
} else {
  result = div.currentStyle["styleFloat"];
}
console.log(result);

getBoundingClientRect()、getClientRects()

getBoundingClientRect()该方法获得页面中某个元素的上、右、下、左分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（到浏览器顶部而不是文档顶部）。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

getClientRects()是返回一个ClientRectList集合。

var div1 = document.getElementById("div1");
var rect1 = div1.getClientRects();
var rect2 = div1.getBoundingClientRect();
console.log(rect1[0].top);
console.log(rect2.top);

本文由 Abert 创作，采用知识共享署名 4.0 国际许可协议。

本站文章除注明转载/出处外，均为本站原创或翻译，转载请务必署名。