1、appendChild(node)
向当前节点对象的追加节点。经常用于给页面动态的添加内容。
例如下面给div添加一个文本节点:
var newdiv=document.createElement("div")
var newtext=document.createTextNode("A new div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
上面的例子中给DIV添加文本,也可以用newdiv.innerHTML=”A new div”实现,
2、removeChild(childreference)
移除当前节点的子节点,返回被移除的节点。这个被移除的节点可以被插入document树中别的地方
var childnode=document.getElementById("child")
var removednode=document.getElementById("father").removeChild(childnode)
3、cloneNode(deepBoolean)
复制并返回当前节点的复制节点,这个复制得到的节点是一个孤立的节点,不在document树中。复制原来节点的属性值,包括ID属性,所以在把这个新节点加到document之前,一定要修改ID属性,以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。
这个方法支持一个布尔参数,当deepBoolean设置true时,复制 当前节点的所有子节点,包括该节点内的文本。
11111
p=document.getElementById("mypara")
pclone = p.cloneNode(true);
p.parentNode.appendChild(pclone);
4、replaceChild(newChild, oldChild)
把当前节点的一个子节点换成另一个节点
例如:
newel.appendChild(text);
document.getElementById("adiv").replaceChild(newel, oldel);
5、insertBefore(newElement, targetElement)
给当前节点插入一个新节点,如果targetElement被设置为null,那新节点被当作最后一个子节点插入,否则那新节点应该被插入targetElement之前的最近位置。
熊掌我所欲也!var lovespan=document.getElementById("lovespan")var newspan=document.createElement("span")
var newspanref=document.body.insertBefore(newspan, lovespan) newspanref.innerHTML="鱼与";
6、click()
执行元素的一次点击,可以用于通过脚本来触发onClick函数
function wow() {
alert("我好象没有点鼠标啊");
}
var div = document.getElementById("test");
div.click();
1、childeNodes 返回所有子节点对象,
例如
一个和尚有水喝。 两个和尚挑水喝。 三个和尚没水喝。
var msg=””
var mylist=document.getElementById("mylist")
for (i=0; i
var tr=mylist.childNodes[i];
for(j=0;j
var td=tr.childNodes[j];
msg+=td.innerText;
}
}
alert(msg);
2、innerHTML
这是一个事实上的标准,不属于w3c DOM,但是几乎所有支持DOM的浏览器,都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。
新人类,什么?!
window.οnlοad=function(){
document.getElementsByTagName("p")[0].innerHTML="新新人类,什么?!"
}
3、style
返回一个元素的style对象的引用,通过它我们可以获得并修改每个单独的样式。
例如下面的脚本可以修改一个元素的背景色
document.getElementById("test").style.backgroundColor="yellow"
4、firstChild 返回第一个子节点
5、lastChild 返回最后一个子节点
6、parentNode 返回父节点的对象。
7、nextSibling 返回下一个兄弟节点的对象
8、previousSibling 返回前一个兄弟节点的对象
9、nodeName 返回节点的HTML标记名称,使用英文的大写字母,如P, FONT
例如
if (document.getElementById("test").nodeName=="DIV")
alert("This is a DIV");
第一个例子:
使用DOM1.0 的javascript动态地创建一个HTML table。
function start() {
//获得body的引用
var mybody=document.getElementsByTagName("body").item(0);
//创建一个元素
mytable = document.createElement("TABLE");
//创建一个元素
mytablebody = document.createElement("TBODY");
// 创建行列
for(j=0;j<3;j++) {
//创建一个元素
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
//创建一个元素
mycurrent_cell=document.createElement("TD");
//创建一个文本元素
currenttext=document.createTextNode("cell is row "+j+", column "+i);
//把新的文本元素添加到单元TD上
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
mybody.appendChild(mytable); // 把mytable的border 属性设置为2 mytable.setAttribute("border","2"); }