javascript DOM的操作，更新，遍历，添加

介绍JavaScript DOM的操作，更新，遍历，添加
首先列出来HTML代码等待嵌套脚本

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
	<body>
	    <dl id="drink-menu" style="border:soild 1px #ccc;padding:6px;">
	    <dt id="摩卡咖啡">摩卡咖啡</dt>
	    <dd id="橙汁">橙汁</dd>
	    <dt id="可乐">可乐</dt>
	    </dl>
	</body>
</html>

遍历操作
遍历父节点dl的所有标签并输出innertext
添加代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language='javascript'>
    //javascipt.cookie(); DOM的操作，更新，遍历，添加，删除css选择getElementsbyclassname()
    var menu=document.getElementById('drink-menu');
    var len=menu.children.length;//没有子节点，不能用children函数
    //var len=menu.length;
    var str="";
    for(var i=0;i<len;i++)
    {
        str=str+i+"="+menu.children[i].innerText+",";
    }
    alert(str);
    //menu.innerHTML="<script> alert()
</Script>

添加操作

1
2
3
4
5
6
7
8
<script language='javascript'>
    var tagp=document.createElement("p");//创建新的标签
    tagp.id="new";
    tagp.innerText="tea";
    var z=document.getElementById("drink-menu");//提取父节点
    var dd=document.getElementsByTagName("dd");
    z.insertBefore(tagp,dd);//将新创建的放入dd标签之前
</Script>

更改脚本文件的css属性

1
2
3
4
5
6
7
<script language='javascript'>
	var test=document.getElementById('橙汁');
	test.innerText="JavaScript";
	test.style.color="#ff0000";
	test.style.fontWeight="bold";
	//test.style.backgroundColor="red";
</Script>

本文标题:javascript DOM的操作，更新，遍历，添加

文章作者:xiaoqi

发布时间:2017-02-16, 21:08:16

最后更新:2017-02-17, 21:29:20

原始链接:http://m.xiaoqi888.cn/2017/02/16/javascript DOM的操作，更新，遍历，添加.html/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录