原生JS总结

前言

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

原生DOM操作函数和属性

事件

addEventListener()

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

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

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

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

removeEventListener()

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

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

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

1
2
3
4
5
6
7
8
9
10
11
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+也支持这个事件。但这个方法绑定的事件默认为冒泡也只有冒泡。

1
2
3
4
5
6
7
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事件中的阻止默认事件和冒泡事件也有很大区别。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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()执行相同的操作。

1
2
3
4
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()。

1
2
3
4
5
6
7
8
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集合。

1
2
3
4
5
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 国际许可协议。

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