DOM如何创建一个元素?如何给元素设置属性?如何删除属性?

2017-08-04  本文已影响0人  蜕变最美的你
如何创建一个元素?

createElment()方法是用来生成HTML元素节点;

var newDiv = document.createElement("div");
console.log(newDiv);

打印出来内容为"<div></div>";
createElment()参数名为标签的签名,即元素节点的tagName属性,如果传入大写的标签名会自动转为小写,但是不能带有尖括号或者null否则会报错;

createTextNode()方法用来生成文本节点,参数为生成的文本内容;

var newText = document.createTextNode("hello");
console.log(newText);

打印出来内容为"hello";

createDocumentFragment()方法是生成一个DocumentFragment对象。

var newText = createDocumentFragment();

DocumentFragment对象是一个存在于内存的DOM片段,但是不属于当前文档,常常用来生成较复杂的DOM结构,然后插入当前文档。这样做的好处在于,因为DocumentFragment不属于当前文档,对它的任何改动,都不会引发网页的重新渲染,比直接修改当前文档的DOM有更好的性能表现。

如何给元素设置属性?

setAttribute()方法用于设置元素属性;

var Inp = document.getElementById("input");
Inp.setAttribute("type", "button");

利用setAttribute()方法可以将"input"的type进行重新设置;

如何删除属性?

romoveAttribute()用于杀出元素属性;

<h1 style="color:red">Hello World</h1>
document.getElementsByTagName("H1")[0].removeAttribute("style"); 

输出为无"style="color:red" 的文字样式;

上一篇 下一篇

猜你喜欢

热点阅读