访问指定节点
通过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. DOM操作的性能问题

    造成DOM操作性能差的原因:1.DOM操作的实现和ECMAscript的实现是两个独立的部分,之间通过接口来完成相应的DOM操作. 2.实时查询文档得到HTML集合,重复执行查询操作.特别是lengt ...

  2. Excel 2010 如何将筛选后的数据复制粘贴到另一个工作表筛选后的表格里

    如果你是指自动筛选后,把筛选数据复制/粘贴到另外一个工作表中,不妨试试试 第一步选中筛选后的数据区域:第二步执行菜单命令“编辑/定位/定位条件/可见单元格”,确定:第三步单击复制按钮或者Ctrl+C或 ...

  3. java 中的String类型数据添加双引号

    转义符 \ 加上引号   \" <?xml version="1.0"encoding="GBK"?> String temp = &qu ...

  4. 微信小程序 --- app.js文件

    app.js文件是项目的入口文件: //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('l ...

  5. Spring集成Struts、Hibernate----三大框架SSH（Spring、Struts和hibernate）

    Spring 框架可以完成业务层的设计任务,Struts框架可以将表示层和业务层分离,而Hibernate框架可以提供灵活的持久层支持.下面介绍三大框架的集成环境: 1.配置Struts2. I.导入 ...

  6. Javaweb程序打包或exe执行文件

    java程序的打包与发布 这里主要是讲解一下怎样将 Java程序打包成独立运行的exe程序包,以下这种方法应该是最佳的解决方案了.NetDuke的EXE程序包了是使用这种方案制作的.在操作步骤上还是比 ...

  7. 各大互联网企业Java面试题汇总，看我如何成功拿到百度的offer

    前言 本人Java开发,5年经验,7月初来到帝都,开启面试经历,前后20天左右,主面互联网公司,一二线大公司或者是融资中的创业公司都面试过,拿了一些offer,其中包括奇虎360,最后综合决定还是去百 ...

  8. php安装xmlwriter遇到报错及解决方法

    Q1:make的时候报' error: 'zend_class_entry' has no member named 'default_properties''错误, A:把 错误行C文件中defau ...

  9. oracle(十一) scn

    SCN(System Chang Number)作为oracle中的一个重要机制,在数据恢复.Data Guard.Streams复制.RAC节点间的同步等各个功能中起着重要作用. 理解SCN的运作机 ...

  10. IQKeyboardManager第三方库的使用

    IQKeyboardManager是iOS中解决键盘弹起遮挡UITextField/UITextView的一种很实用的工具.无需输入任何代码,不需要额外的设置.使用IQKeyboardManager的 ...