20150423 DOM相关元素操作
相关元素：
1.obj.nextSibling下一个元素（注意回车与空格）
2.obj.previousSibling上一个元素（注意回车与空格）
3.obj.parentNode父级元素。
4.obj.childNodes所有的子级元
属性：
obj.firstChild
obj.lastChild
obj.childNode[n]
方法：
obj.appendChild(元素对象); //元素对象，不是一个HTML的字符串
d.insertBefore(要插入的元素对象,相对于哪个元素);
d.removeChild(要移除的元素对象);
d.replaceChild(新元素，旧元素);
d.getElementsByxxx("id字符串");在子元素中找符合条件的元素。
如何在子级中找指定的元素？
1.遍历 2.obj.getElementsByxxxxx;
如何向元素中追加一个子元素？
1.造个元素。
var n = document.createElement("div"); //造元素
n.innerHTML = "this is a new div"; //设内容
n.style.backgroundColor="green"; //设样式
2.加进去。
d.appendChild(n);
事件：
onclick 鼠标单击触发 ondblclick 鼠标双击触发
onmouseover 鼠标在上面移动时触发 onmouseout 鼠标离开时触发
onkeydown 按键按下时触发 onkeyup 按键抬起时触发
onfocus 获得焦点时触发 onblur 失去焦点时触发
onchange 只要内容改变触发
<script language="javascript">
//造个子元素；
//var n = document.createElement("div");
//n.innerHTML = "this is a new div";
//n.style.backgroundColor="green";
//加去去
//d.appendChild(n);
//d.insertBefore(n,d.childNodes[0]);
//d.removeChild(d.childNodes[0]);
//造个元素
var ss = document.createElement("span");
ss.innerHTML = "bbb";
d.replaceChild(ss,d.childNodes[0]);
</script>
点击下面出现子集
<script language="javascript">
function buy(li)
{
var s = document.getElementById("ss");
s.appendChild(li);
}
</script>
</head>
<body>
商店里的商品：
<ul id="dd">
<li onclick="buy(this)">苹果</li>
<li onclick="buy(this)">桔子</li>
<li onclick="buy(this)">香蕉</li>
<li onclick="buy(this)">菠萝</li>
</ul>
你所买的商品：
<ul id="ss">
</ul>
</body>
</html>
添加同级和子集 js
<script language="javascript">
var node;//目标元素对象。
function selectLI(li)
{
//把点击的这个元素给记下来。
node=li;
//找“目标”后面的span标签
var sp = document.getElementById("dd");
sp.innerHTML = li.innerHTML;
}
function addTongJi()
{
//造个元素对象
var newNode = document.createElement("li");
newNode.innerHTML = document.getElementById("txt").value;
//插进去
if(node != null)
{
node.parentNode.insertBefore(newNode,node);
}
}
function addZiJi()
{
//造个元素对象
var newNode = document.createElement("li");
newNode.innerHTML = document.getElementById("txt").value;
//追加到子元素中
if(node !=null)
{
//1.判断是否有<ul>子元素，没有的话就建。
var uus = node.getElementsByTagName("ul"); //数组
var uu;
if(uus == null)
{
uu = document.createElement("ul"); //元素
}
else
{
uu = uus[0];
}
//2.向子ul子元素中加入newnode
uu.appendChild(newNode);
node.appendChild(uu);
}
}
</script>
</head>
<body>
<ul>
<li onclick="selectLI(this)">山东</li>
<li onclick="selectLI(this)">辽宁</li>
<li onclick="selectLI(this)">江苏</li>
</ul>
<form id="form1" name="form1" method="post" action="">
<p>目标：<span id="dd"></span>
</p>
<p>新增：
<input id="txt" name="txt" type="text" value="" />
<input name="addChild" onclick="addZiJi()" type="button" value="添加子级" />
<input name="addSibling" onclick="addTongJi()" type="button" value="添加同级" />
</p>
</form>
</body>
</html>
