使用脚本操作DOM

createElement()

可以新建任何类型的标准HTML元素,比如段落、区间、表格、列表等。

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

createTextNode()

创建文本内容

var newTextNode = document.createTextNode("Here is some text content.");

cloneNode()

这个方法以一个布尔值作为参数,当参数为true时,表示不仅要复制节点,还要复制全部子节点:

var myDiv = document.getElement("id");
var newDiv = myDiv.cloneNode(true);  //复制了元素及其子节点

appendChild()

把新节点添加到DOM树

var newText = document.createTextNode("Here is some text content.");
var myDiv = document.getElementById("id1");
myDiv.appendChild(newText);

appendChild()总是在现有的最后一个子节点之后添加子节点。

insertBefore()

指定一个子节点,然后把新节点插入到它前面。

replaceChild()

把父元素现有的一个子节点替换成另一个节点。它有两个参数,一个是新的子节点,一个是现有的子节点。

removeChild()

删除节点

setAttribute()

给元素节点创建属性并赋值。

var myPara = document.getElementById("para1");
myPara.setAttribute("title", "Opening paragraph");  //设置title属性
myPara.setAttribute("title", "New title");  //覆盖title属性  
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为N...
    Maggie_77阅读 426评论 0 0
  • 什么是DOM??? DOM(Document Object Model 文档对象模型)是针对HTML和XML文档的...
    荧惑3_3阅读 1,409评论 0 1
  • 故事开始于一个春天阳光明媚的午后,哥哥家去种花生,弟弟家去收蒜苔,暂且称哥哥为张三,弟弟为李四好了。茶余饭...
    王非王阅读 222评论 0 0
  • 善良 乐于助人,拜茶所赐 双鱼座的性格观 你温柔、多愁善感、想像丰富 爱做白日梦,现实理想分不清楚 集中了十二星座...
    爱生活挺自己阅读 239评论 0 0
  • 刚刚高考完的我正在网吧上网,被突然响起的手机铃声吓了一跳,一看来电显示,不是别人,正是我很讨厌的亲哥哥。 挂了两遍...
    冰城蜀黍阅读 463评论 0 2