访问指定节点
通过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. Android 7.1 SystemUI--任务管理--场景一:长按某个缩略图，拖动分屏的流程

    TaskView 类的长按事件 onLongClick 方法内发送了 DragStartEvent 事件消息,该 DragStartEvent 事件消息由 RecentsView,TaskStackV ...

  2. 【BZOJ4195】[Noi2015]程序自动分析 并查集

    [BZOJ4195][Noi2015]程序自动分析 Description 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3 ...

  3. WCF(二) 使用配置文件实现WCF应用程序

    服务三要素ABCA:Address 在哪里 (包含传输方式的信息)B:Binding 怎么实现(与地址的传输方式要匹配)C:Contract做什么(服务契约) namespace WCFService ...

  4. 下载组件Jspsmartupload中文乱码解决办法

    先用jdgui反编译jar包,得到源码,然后将源码拷贝到myeclipse中,注意路径是按照源码的路径 打开默认会有错误提示,稍微改改就解决了 1,打开“  SmartUpload.java  ”,查 ...

  5. [python] python单元测试经验总结

    python写单元大多数都会用到unittest和mock,测试代码覆盖率都会用到coverage,最后再用nose把所有的东西都串起来,这样每次出版本,都能把整个项目的单元测试都运行一遍. Unit ...

  6. VMware Authorization Service 未运行怎么解决

    操作步骤如下: 1.按win+r快捷键,输入services.msc,点击确定: 2.服务列表找到VMware Authorization Service 并双击: 3.修改启动类型为自动,点击应用, ...

  7. 亿级别G级别文本数据去重

    亿级别G级别文本数据去重 文件总行数 字节数 去重后行数 [root@d mongoexport]# wc -l superpub-ask-question.csv126530681 superpub ...

  8. scrapy爬虫系列之开头--scrapy知识点

    介绍:Scrapy是一个为了爬取网站数据.提取结构性数据而编写的应用框架,我们只需要实现少量的代码,就能够快速抓取.Scrapy使用了Twisted异步网络框架,可以加快我们的下载速度. 0.说明: ...

  9. Django - rest - framework - 上

    一.快速实例 http://www.django-rest-framework.org/tutorial/quickstart/#quickstart http://www.cnblogs.com/y ...

  10. Scala简介及基础语法

    一.scala简介 官网:https://www.scala-lang.org/ Scala语言很强大,集成了面向对象和函数式编程的特点. 运行在JVM(jdk). 大数据中为什么学习scala? s ...