您的位置：首页 > 其它

4.层次访问节点和创建节点

2016-08-18 11:38 239 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层次关系访问节点和创建节点</title>
<script type="text/javascript">
window.onload=function(){
//funFindNode();  //查找
//funAttribute();  //属性设置
funCreateNode(); //创建节点
}
//3.创建节点
function funCreateNode(){
//创建li标签
var newli=document.createElement("li");

//创建input标签
var newinput=document.createElement("input");

//给input添加属性和属性值
newinput.setAttribute("type","text");
newinput.setAttribute("value","陆怡雯");

//将input放在li标签
newli.appendChild(newinput);

//li标签放入ul
document.getElementsByTagName("ul")[0].appendChild(newli);

//复制节点
var cloneli=newli.cloneNode(true);

//复制的li标签放入ul
document.getElementsByTagName("ul")[0].appendChild(cloneli);

//新节点插入到内部列表之前
document.getElementsByTagName("ul")[0].insertBefore(newli,document.getElementsByTagName("li")[0]);
}
//2.给元素添加属性或获取属性
function funAttribute(){
var inp=document.getElementsByTagName("input")[0];
//设置属性值
inp.setAttribute("value","holly");

//获取属性值
var inpvalue=inp.getAttribute("value");

alert(inpvalue);
}
//1.查找节点
function funFindNode(){
//获取span标签
var thisspan=document.getElementsByTagName("span")[0];

//拼接显示的内容
//1.获取span标签的父节点的内容
var divstr="span标签的父节点内容:"+thisspan.parentNode.innerHTML+"<br/>";
console.log("span标签的父节点内容:"+divstr+"<br/>");

//2.获取div子节点集合
var divlist=document.getElementsByTagName("div")[0].childNodes;
divstr+="div子节点集合:<br/>";
for(var i=0;i<divlist.length;i++){
divstr+=divlist[i].innerHTML;
}

console.log("div子节点集合:"+divstr+"<br/>");

//3.获取第一个子节点
divstr+="<br/>div第一个子节点:"+document.getElementsByTagName("div")[0].firstChild.innerHTML+"<br/>";
console.log("div第一个子节点:"+divstr+"<br/>");

//4.获取最后一个子节点
divstr+="div的最后一个子节点:"+document.getElementsByTagName("div")[0].lastChild.innerHTML+"<br/>";
console.log("div的最后一个子节点:"+divstr+"<br/>");

//5.获取ul标签下一个节点
divstr+="ul列表的下一个节点:"+document.getElementsByTagName("ul")[0].nextSibling.innerHTML+"<br/>";
console.log("ul列表的下一个节点:"+divstr+"<br/>");

//6.获取ul标签上一个节点
divstr+="ul列表的上一个节点:"+document.getElementsByTagName("ul")[0].previousSibling.innerHTML+"<br/>";

console.log("ul列表的上一个节点:"+divstr+"<br/>");

//获取显示内容的div
document.getElementsByTagName("div")[1].innerHTML=divstr;
}

</script>
</head>

<body>
<div>
<h3>动画列表</h3>
<ul>
<li>熊出没</li>
<li>喜洋洋</li>
<li id="lastli"><input type="text"/></li>
</ul>
<span>希望大家明天上午,好好把我爱我家网页画完!</span>
</div>
<div></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航