4.DOM操作节点对象的内容(标签中文本内容,子标签,子标签文本......):
4.1:获得节点内容:节点对象.innerHTML
eg:
alert(ob1.innerHTML);
4.2:修改节点内容: 节点对象.innerHTML=“新值”;
eg:
ob1.innerHTML="哈哈";
4.3:清空节点内容:
eg:
ob1.innerHTML="";
5.DOM操作节点对象的文本内容(标签中的文本和子标签中的文本......):
5.1:获得节点文本内容(标签中的文本和子标签中的文本):节点对象.innerText
eg:
alert(ob1.innerText);
5.2:修改节点文本内容(标签中的所有内容都修改):节点对象.innerText=“新值”;
eg:
ob1.innerText="呵呵";
6.DOM操作节点对象的属性:
6.1:获得节点对象的属性:节点对象.属性名
eg:
alert(ob2.src);
6.2:修改节点对象属性:节点对象.属性名=“值”;
eg:
ob2.src="img/img-2.jpg";
6.3:删除节点对象的属性:节点对象.removeAttribute("属性名");
eg:
ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");
7.DOM操作节点对象样式:
7.1:设置节点对象的样式:节点对象.style.样式名=“样式值”;
eg:
ob1.style.color="red";
ob1.style.backgroundColor="blue";
7.2: 获得节点对象的样式: 节点对象.style.样式名
eg:
alert(ob1.style.color);
8.事件
8.1:onload:页面加载完事件。
8.2:onclick:鼠标单击事件。
8.3:onchange:改变事件。
8.4:onblur:光标离开事件。
8.5:onfocus:获得光标事件。
8.6:onmouseover:鼠标经过事件。
8.7:onmouseout:鼠标离开事件。
9.DOM操作节点对象
9.1:创建节点对象:
9.1.1:创建标签节点对象:document.createElement("标签名");
eg:
//创建节点对象
var node1=document.createElement("p");
eg:
//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好中国";
9.1.2:创建文本对象:document.createTextNode("文本内容");
eg:
//创建文本对象
var node1text=document.createTextNode("这是一个段落");
9.2:添加节点对象:节点对象.appendChild(子节点);
eg:
//将节点对象添加body中
document.getElementById("d1").appendChild(node1);
//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById
("d2").innerHTML+"哈哈
呵呵呵
";
9.3:删除节点对象:父节点对象.removeChild(子节点对象);
eg:
//获得父节点对象
var parentNode=document.getElementById("d1")
//获得要删除的子节点对象
var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象,只有谷歌,火狐
childNode.remove();
9.4:复制节点对象:节点对象.cloneNode(true);
eg:
//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制,false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);
9.5: 替换元素中的子节点:父节点对象.replaceChild(newnode,oldnode);
以上就是Javascript中DOM的详细介绍(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!