var obj=document.getElementById("news");var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;alert(str);
element属性
属性名称
描述
firstElementChild
返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild
返回节点的最后一个子节点
nextElementSibling
下一个节点
previousElementSibling
上一个节点
节点的信息
var nodes=document.getElementById("nodeList");var type1=nodes.firstChild.nodeType;var type2=nodes.firstChild.firstChild.nodeType;var name1=nodes.firstChild.firstChild.nodeName;var str=nodes.firstChild.firstChild.nodeValue;var con="type1:"+type1+"<br/>type2:"+type2+"<br/>name1:"+name1+"<br/>str:"+str;
document.getElementById("nodeList").nextSibling.innerHTML=con;
操作节点
操作节点的属性
名称
描述
getAttribute(“属性名”)
获取属性值
setAttribute(“属性名”,“属性值”)
设置属性值
var ele=document.getElementsByName("book");
var img=document.getElementById("image");
if(ele[0].checked){
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
img.nextSibling.innerHTML="我和狗狗一起活下来";
}
else if(ele[1].checked){
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.nextSibling.innerHTML="灰霾来了怎么办";
}
创建和插入节点
名称
描述
createElement( tagName)
创建一个标签名为tagName的新元素节点
A.appendChild( B)
把B节点追加至A节点的末尾
insertBefore( A,B )
把A节点插入到B节点之前
cloneNode(deep)
复制某个指定的节点
var ele=document.getElementsByName("book");
var bName=document.getElementsByTagName("div")[0];
if(ele[0].checked){
var img=document.createElement("img");
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
bName.appendChild(img);
}
else if(ele[1].checked){
var img=document.createElement("img");
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.setAttribute("onclick","copyNode()")
bName.appendChild(img);
删除和替换节点
名称
描述
removeChild( node)
删除指定的节点
replaceChild( newNode, oldNode)属性attr
用其他的节点替换指定的节点
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);var oldNode=document.getElementById("second");var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
js-Dom简介DOM:Document Object Model节点HTML 文档中的所有内容都是节点整个文档是一个文档节点每个 HTML 元素是元素节点HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点document对象常用属性名称说 明referrer返回载入当前文档的****URLURL返回当前文档的****URLdocument.referrerdocument.URLdocument常用方法