修改DOM包括:改变HTML内容、CSS样式、HTML属性,创建新的HTML元素、删除已有的HTML元素、改变事件
注:不需要查找就能获得的元素:
html document.documentElement
head document.head
body document.body
改变HTML内容
最简单的方法就是使用innerHTML属性
document.getElementById("p1").innerHTML="newstring";
改变HTML样式
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
创建新的HTML元素
首先创建该元素,再把它追加到已有元素上。
var para = document.createElement("p");
var node = document.createTextNode("这是一个新段落");
para.appendChild(node);
document.getElementById("div1").appendChild(para);
appendChild是将元素作为父元素最后一个子元素插入,可以用insertBefore()将元素插入到指定元素的前面
document.getElementById("div1").insertBefore(para,指定子元素);
删除已有的HTML元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
替换HTML元素
parent 父元素,child 子元素,para 要使用的替换元素
parent.replaceChild(para,child);