ES5 原生Dom 操作

DOMTokenList 有一个表示自己包含多少元素的 length 属性,而要取得每个元素可以使用 item()方
法,也可以使用方括号语法。此外,这个新类型还定义如下方法。
 add(value):将给定的字符串值添加到列表中。如果值已经存在,就不添加了。
 contains(value):表示列表中是否存在给定的值,如果存在则返回 true,否则返回 false。
 remove(value):从列表中删除给定的字符串。
 toggle(value):如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。
这样,前面那么多行代码用下面这一行代码就可以代替了:
div.classList.remove("user");
以上代码能够确保其他类名不受此次修改的影响。其他方法也能极大地减少类似基本操作的复杂
性,如下面的例子所示。
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");


 childElementCount:返回子元素(不包括文本节点和注释)的个数。
 firstElementChild:指向第一个子元素; firstChild 的元素版。
 lastElementChild:指向最后一个子元素; lastChild 的元素版。
 previousElementSibling:指向前一个同辈元素; previousSibling 的元
 nextElementSibling:指向后一个同辈元素; nextSibling 的元素版。

element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

 

var iframe = document.getElementById("myIframe");
var iframeDoc = iframe.contentDocument;

posted @ 2017-11-04 11:19  ~浪里个浪  阅读(553)  评论(0编辑  收藏  举报