html代码：

<body onload ="loaded12()">

<form name="form1" action="http://www.baidu.com" method="post">

	姓名：<label ><input type="text" name="name"/></label><br/>

    年龄：<label ><input type="text" name="age"/></label><br/>

    <input type="submit" name="submit" value="提交" onclick="submitClick()" />

    <input type="reset" name="reset" value="重置"/>

    <input type="image" name="image">

</form>

<h1 id="title">好人一生平安</h1>

</body>

遍历节点

function loaded12(){

	var txt="";

	var c=document.body.childNodes;

	for (i=0; i<c.length; i++)

	  {

		  txt=txt + c[i].nodeName + "-" + c[i].nodeType+ "-"+c[i].nodeValue+"   ";

	  };

	   alert(txt);

}

改变节点的值：下面两句代码等价

 document.getElementById("title").childNodes[0].nodeValue= "我是标题";

document.getElementById("title").innerHtml="我是标题";

改变属性：

document.getElementById("title").childNodes[0].nodeValue= "我是标题";//下面两句等价

document.getElementById("title").setAttribute("style","background: red;");

document.getElementById("title").style.background="red";

添加节点：

var tilte = document.getElementById("title");

img = document.createElement("IMG");

img.src="123.png";

title.appendChild(img);
 
var msg ="提示，我是好人，我要回家******8啦啦啦啦啦啦啦。。。。。。";

var newpncode = document.createElement("p");

var newtext = document.createTextNode(msg);

newpncode.appendChild(newtext);

var body = document.getElementById("body");

body.appendChild(newpncode);

删除节点：注意url中间不能有空格，不然第一次删除的是空白节点，不过在ie上不解析空白节点，是没有问题的

<ul id="myList"><li>购物</li><li>游戏</li><li>电影</li></ul>

<p id="demo">wohsi fwapgje53</p>

<input type="button" value="开始遍历" onclick="deleteNodes()">

<script type="text/javascript">

function deleteNodes(){

	var list=document.getElementById("myList");

	list.removeChild(list.childNodes[0]);

}

</script>

遍历body下的节点：（注意：获取body对象方法是document.body而不是document.getElementsByTagName("body")）

var walker = null;//引用迭代器

var list = "";//

var filter = new Object;

filter.acceptNode = function(){

	return NodeFilter.FILTER_ACCEPT;//

}

var rootnode=document.body;

// walker = document.createTreeWalker(rootnode,NodeFilter.SHOW_ELEMENT,null,false)

 walker = document.createTreeWalker(rootnode,NodeFilter.SHOW_ELEMENT,filter,false);

 while(walker.nextNode()){

	list+=walker.currentNode.tagName+"\n";

 }

alert(list);

JS DOM节点的更多相关文章

  1. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  2. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  3. JS DOM节点（当前标签和同级、父级、子级..之间的关系）

    1. 通过顶层document节点获取    1) document.getElementById(elementId) //根据id获得    2) document.getElementsByNa ...

  4. js DOM 节点树 设置 style 样式属性

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. JS DOM节点的增删改查

    合并拆分 行内样式  script写在html里面

  6. JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

    JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes     ...

  7. 原生js快速渲染dom节点

    function renderDom(str){ var _div = document.createElement('div'); _div.innerHTML = str; var dom_tem ...

  8. js获取节点的DOM操作

    一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...

  9. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

随机推荐

  1. vue再次入手（数据传递①）

    准备 之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架. 1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http:/ ...

  2. Swift - 构造函数

    Swift 2.0 构造函数基础 构造函数是一种特殊的函数,主要用来在创建对象时初始化对象,为对象成员变量设置初始值,在 OC 中的构造函数是 initWithXXX,在 Swift 中由于支持函数重 ...

  3. JS案例 - 基于vue的移动端长按手势

    ================================惯例碎碎念前言================================ 当时首先想到要做长按事件的时候,我想到的是vue内部的自 ...

  4. 关于ASP.NET中Request.QueryString的乱码问题(转)

    转自 http://www.cnblogs.com/chinhr/archive/2008/09/23/1296582.html 今天在使用Request.QueryString的时候,发现所有接收到 ...

  5. php sqlserver及xdebug扩展配置

    ;extension=php_bz2.dllextension=php_curl.dll;extension=php_fileinfo.dll;extension=php_ftp.dll;extens ...

  6. Oracle相关内容整理

    一.常用sql 1.查看版本 SELECT * FROM V$VERSION; SELECT version FROM V$INSTANCE 2.数据库发生死锁时,跟踪文件的位置 关于跟踪文件,大义是 ...

  7. linux 终端输出颜色

    在Linux终端下调试程序时,有时需要输出大量信息.若能控制字体的颜色和显示方式,可使输出信息对比鲜明,便于调试时观察数据. 终端的字符颜色由转义序列(Escape Sequence)控制,是文本模式 ...

  8. Windows Server 2012设置WinDbg Kernel Debugging Local

    网上主要提到了以下两点: 1.cmd窗口输入bcdedit /debug on,重新启动计算机. 2.下载对应版本Windows符号文件,并添加环境变量_NT_SYMBOL_PATH. 其实根据环境不 ...

  9. [转] 基于TINY4412的Andorid开发-------简单的LED灯控制

    阅读目录 一.编写驱动程序 二.编写代码测试驱动程序 三.编写HAL代码 四.编写Framework代码 五.编写JNI代码 六.编写App 参考资料: <Andriod系统源代码情景分析> ...

  10. 关于linux例行任务crontab的使用

    Linux 例行性任务(也叫周期性任务)命令使用:crontab1.crontab -l   查看当前用户的任务2.crontab -e  编辑(设置)当前用户的任务,执行行不用重启crond服务.3 ...