访问指定节点
通过document节点获取 document.getElementById(elementId)

document.getElementsByName(elementName) document.getElementsByName('radiogroup1')[0]  该方法的返回值是一个数组，若要获取，可以通过返回数组中下标值进行获取
document.getElementsByTagName(tagName) var a=document.getElementsByTagName("a")[0]; 该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组
document.getElementsByClassName(ClassName) 
<body id="myid" class="mystyle">

<script type="text/javascript">
x=document.getElementsByTagName('body')[0];
document.write("Body CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>
 className 属性设置或返回元素的 class 属性。
通过父节点获取
 
 parentObj.firstChild
如果节点为已知节点 （parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持 parentObj.firstChild.firstChild.firstChild...的形式
parentObj.lastChild
获取已知节点（parentObj）的最后一个子节点
parentObj.childNodes
获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。 
注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。 
parentObj.children
获取已知节点的直接子节点数组。 
注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
parentObj.getElementsByTagName(tagName)
返回已知节点的所有子节点中类型为指定值的子节点数组。例 如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。 
通过临近节点获取 neighbourNode.previousSibling
获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
neighbourNode.nextSibling
获取已知节点（neighbourNode）的下一个节点
通过子节点获取 childNode.parentNode
获取已知节点的父节点

查看修改属性节点
getAttribute
 

setAttribute

克隆节点
newElement oldElement.cloneNode(bool deep);  这个方法只有一个参数deep，布尔值，如果为true，则克隆oldElement 这个及其子节点，否则只可能这个节点本身。 

返回值就是一个克隆的节点newElement。 		 
  1. window.onload = function () { 
    2. 

  2. var sourceNode = document.getElementById("div-0"); // 获得被克隆的节点对象 
    3. 

  3. for (var i = 1; i < 5; i++) { 
    4. 

  4. var clonedNode = sourceNode.cloneNode(true); // 克隆节点 
    5. 

  5. clonedNode.setAttribute("id", "div-" + i); // 修改一下id 值，避免id 重复 
    6. 

  6. sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点 
    7. 

  7. } 


  1. <div id="main"> 
    2. 

  2. <div id="div-0"> 
    3. 

  3. <span>Cloud018 said, </span> 
    4. 

  4. <span>"Hello World!!!"</span> 
    5. 

  5. </div> 
    6. 

  6. </div>

 

创建节点
createElement("p") 这段代码创建新的 <p> 元素（如需向 <p> 元素添加文本，您必须首先创建文本节点）

createTextNode("这是新段落。") 这段代码创建了一个文本节点

para.appendChild(node) 向 <p> 元素追加这个文本节点

var element=document.getElementById("div1");
element.appendChild(para);
 向一个已有的元素追加这个新元素

删除

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
 
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

 
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

在js中三种改变样式的方法

  1.                b1.onclick=function() {
    2. 

  2. 					d1.className='change';
    3. 

  3. 				}//用于为DOM元素直接添加样式类
    4. 

  4. 				b2.onclick=function() {
    5. 

  5. 					d1.style.color='red';
    6. 

  6. 				}//用于为DOM元素添加样式值
    7. 

  7. 				b3.onclick=function() {
    8. 

  8. 					d1.style.cssText='color: yellow; border: 3px double green; width: 300px; height: 300px;';
    9. 

  9. 				}用于为DOM元素一次添加多个样式值

 

 

JS文档DOM的更多相关文章

  1. gulpfile.js文档

    gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...

  2. 使用node.js 文档里的方法写一个web服务器

    刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...

  3. JavaEE实战——XML文档DOM、SAX、STAX解析方式详解

    原 JavaEE实战--XML文档DOM.SAX.STAX解析方式详解 2016年06月22日 23:10:35 李春春_ 阅读数:3445 标签: DOMSAXSTAXJAXPXML Pull 更多 ...

  4. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  5. JS文档生成工具：JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  6. java解析xml文档(dom)

    DOM解析XML文档 读取本地的xml文件,通过DOM进行解析,DOM解析的特点就是把整个xml文件装载入内存中,形成一颗DOM树形结构,树结构是方便遍历和和操纵. DOM解析的特性就是读取xml文件 ...

  7. JS文档和Demo自动化生成工具 - SmartDoc发布

    曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...

  8. 使用YUIDoc生成JS文档

    其实YUIDoc主页已经写的比较清晰了,但有一些概念和细节再点出一些注意的地方. 目前最新的YUIDoc使用nodejs进行开发安装和使用都非常的方便. 我们只需要将我们的代码加上必要的注释,便可以很 ...

  9. 笔记：XML-解析文档-DOM

    要处理XML文档,就要先解析(parse)他,解析器时这样一个程序,读入一个文件,确认整个文件具有正确的格式,然后将其分解成各种元素,使得程序员能够访问这些元素,Java库提供了两种XML解析器: 像 ...

随机推荐

  1. ELK平台介绍

    在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段: 以下内容来自:http://baidu.blog.51cto.com/71938/1676798 日志主要包括系统日志.应用程序日志和安全 ...

  2. centos7.2启动级别

    systemctl set-default multi-user.target      设定默认为字符界面,也就是3 systemctl set-default graphical.target  ...

  3. postgresql----数据库表约束----NOT NULL,DEFAULT,CHECK

    数据库表有NOT NULL,DEFAULT,CHECK,UNIQUE,PRIMARY KEY,FOREIGN KEY六种约束. 一.NOT NULL ---- 非空约束 NULL表示没有数据,不表示具 ...

  4. lunux系统安全

    1.清除不必要的系统帐户 [root@deep]# userdel adm [root@deep]# userdel lp [root@deep]# userdel sync [root@deep]# ...

  5. Hadoop生态上几个技术的解释：hive、pig、hbase 关系与区别

    hadoop生态圈 Pig 一种操作hadoop的轻量级脚本语言,最初又雅虎公司推出,不过现在正在走下坡路了.当初雅虎自己慢慢退出pig的维护之后将它开源贡献到开源社区由所有爱好者来维护.不过现在还是 ...

  6. CH1807 Necklace【Hash】【字符串】【最小表示法】

    1807 Necklace 0x18「基本数据结构」练习 背景 有一天,袁☆同学绵了一条价值连城宝石项链,但是,一个严重的问题是,他竟然忘记了项链的主人是谁!在得知此事后,很多人向☆同学发来了很多邮件 ...

  7. Oracle等待事件之db file scattered read

    1.产生原因 该等待事件通常发生在数据库多块读时,表示发生了与全表扫描和快速索引扫描相关的等待.通常意味着全表扫描过多,或者I/O 能力不足,或者I/O 竞争. 2.确定产生问题对象方法 a)查找全表 ...

  8. Tomcat 系统架构

    https://www.ibm.com/developerworks/cn/java/j-lo-tomcat1/index.html 2010 年 5 月 20 日发布 本文以 Tomcat 5 为基 ...

  9. Nginx正向代理配置

    服务器端: server { resolver 8.8.8.8; resolver_timeout 5s; listen 0.0.0.0:8888; access_log /usr/local/ngi ...

  10. 大规模Docker平台自动化监控之路

    本文介绍了通过Monitor,如何实现大规模容器运维平台的自动化监控需求. 尽管Docker技术目前还处于不稳定的发展与标准制定阶段,但这门技术已经呈现了极其火热的增长状态,却已经是不争的实事.到底有 ...