saber酱的抱枕

出售域名:lovesaber.com 和 saber.我爱你

08/11
07:49
学习

使用html5的classList对象操作DOM节点的class

在以前,要使用JavaScript来操作DOM节点的class属性比较麻烦,很多时候都要借助第三方js库。但html5新增的classList对象使这一操作变得简便多了,而且这个对象已经实现了五六年了,浏览器兼容性也比较好。(IE从IE10开始支持,其他浏览器支持得更好)

在html5中,每个DOM节点都有个classList对象,我们可以借助该对象的方法、属性来便利的操作节点的class属性。

浏览器能力检测:

"classList" in document.createElement("a");
// in 操作符用于检测索引是否在该数组中,或属性是否在该对象中。判断的是key不是value

classList对象的属性和方法如下:

element.classList.length // 返回节点的class数量

element.classList.value // 返回节点的所有class名,等价于element.className

element.classList.add(string) // 给节点添加class。示例:
document.body.classList.add("c1"); // 添加一个class
document.body.classList.add("c1","c2","c3"); // 添加多个class

element.classList.remove(string) // 从节点删除class,语法同add()

element.classList.toggle(string) // 切换添加/删除class。如果不存在该class则添加,否则删除
// 如果执行的是添加操作则返回true,如果执行的是删除操作则返回false
// toggle方法可以有第二个参数,根据第二个参数的结果是true还是false来添加/删除该class

element.classList.contains(string) // 检查节点是否含有指定的class

element.classList.item(number) // 返回指定索引的class的名字
// 其实这个方法比较麻烦,一般情况下我们可以直接在element.classList后面用序号查询。如下操作是等价的:
document.body.classList[0];
document.body.classList.item(0);
// 区别在于如果参数指定的class不存在,它们的返回值不同
document.body.classList[1000];       // undefined
document.body.classList.item(1000);  // null

MDN 资料

使用html5的classList对象操作DOM节点的class

04/11
09:03
学习

JavaScript回收DOM节点的内存

如果我们要删除一个DOM节点,可能大家都会想到remove方法。如下:

var a=document.createElement("a");
// 设置内容等代码 ...
a.parentNode.removeChild(a);

Node.removeChild() 方法从DOM中删除一个子节点。返回删除的节点。

从返回值是个节点我们可以知道,removeChild之后,这个节点虽然在DOM里去掉了,但是它仍然存在在内存里。

虽说过一段时间不用,它就会被浏览器回收掉,但如果要重复的创建这个节点的话,那么每次removeChild时使用delete操作符,可以略微优化内存占用(大概……)。

如下:

var a=document.createElement("a");
// 设置内容等代码 ...
delete a.parentNode.removeChild(a);

今天我在chrome上做了多次实验,有一些发现:

1.使用delete之后,chrome浏览器并不会立即回收这部分内存,而是等差不多二十秒之后才回收。

2.使用delete之后,内存回收的比只remove要多一些。

3.即使使用delete,内存也不能完全回收,内存占用还是会一直增加。只是情况略有缓解。

4.有人说delete回收内存只能回收由JavaScript创建的节点,如果是原本html文档里的节点,delete是回收不了的。我试了试,对于原本html文档里的节点,用delete和只用remove没看出明显区别,大概这个说法是对的。

JavaScript回收DOM节点的内存

01/9
08:00
学习

使用js的insertAdjacentHTML方法插入元素

以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。

appendChild:在父级元素内追加新元素。
insertBefore:在父级元素内的某个元素之前插入新元素。

但是这两个方法的参数只能接收元素对象,不能使用字符形式的html代码,而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。

insertAdjacentHTML可以将字符串形式的html代码(需要能解析为DOM元素)解析为一个节点,并将其追加到指定元素的指定位置。

insertAdjacentHTML方法的语法如下:

element.insertAdjacentHTML(position, text);

position参数有以下四个值(都是字符串形式):

beforebegin:在元素的开始位置之前插入。
beforeend:在元素的结束位置之前插入。
afterbegin:在元素的开始位置之后插入。
afterend:在元素的结束位置之后插入。

text参数则是字符串形式的html代码。

根据position参数,我们可以将新元素插入到到指定元素的四个位置:

使用js的insertAdjacentHTML方法插入元素

示例:

<div id="a">
	<div></div>
</div>
<script type="text/javascript" defer>
	var a=document.querySelector("#a");
	a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a");
</script>

结果如下:

<div id="a">
	<a href="">xxx</a>
	<div></div>
</div>

insertAdjacentHTML方法的兼容性表现良好,主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法:

document.documentElement.insertAdjacentHTML

此外,由于insertAdjacentHTML是根据位置插入元素的,因此它不能把新元素插入到img、input等单标签元素里(想这么做的人才是有毛病吧)。

相关文档:《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》


ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。

insertAdjacentElement方法除了第二个参数是DOM节点(不能是字符串形式)外和insertAdjacentHTML方法都一样。

insertAdjacentText方法则只接收字符串格式的参数,并输出为字符串。其他地方也和insertAdjacentHTML方法一样。

使用js的insertAdjacentHTML方法插入元素

05/15
08:00
学习

原生js中的利器——querySelectorAll

昨天发表的那个网站地图助手里,有几个输入框都需要在鼠标经过时自动选中其中的内容。

实现起来没有难度,但类似于getElementBy...这样的选择器难以在不写重复代码的情况下选中几个不同id的元素。所以我的代码写成了这样:

document.getElementById("a").onmouseover=function (argument) {
    this.select();
}
document.getElementById("b").onmouseover=function (argument) {
    this.select();
}
document.getElementById("y").onmouseover=function (argument) {
    this.select();
}
document.getElementById("c").onmouseover=function (argument) {
    this.select();
}

感觉这样实在无法见人,于是去贴吧求助。终于知道了一个好办法:js现在有了一个原生的querySelectorAll方法,可以接受一组css选择器风格的字符串来作为选择器(这点和jQuery很像),如下:

document.querySelectorAll('#a,#b,#c,#y');

这样就解决了重复获取元素的问题了。querySelectorAll简直是一个福音啊。

querySelectorAll和querySelector是HTML5中新增的属性,但是IE8也支持。所以放心的用吧~

由于我们是无法对一个元素集合直接添加事件的,只能用循环来加了(所以jQuery用起来还是更方便啊)。使用for循环就可以,forEach也可以(使用forEach更有逼格?)。不过元素集合并不是数组,要使用forEach的话需要借用数组的属性。于是最后的代码如下:

function selectS(s){
    return document.querySelectorAll(s);
}
[].forEach.call(selectS('#a,#b,#c,#y'),function(e){
    e.onmouseover=function (argument) {
        this.select();
    }
});

原生js中的利器——querySelectorAll