访问指定节点
通过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. 【BZOJ3012】[Usaco2012 Dec]First! Trie树+拓补排序

    [BZOJ3012][Usaco2012 Dec]First! Description Bessie has been playing with strings again. She found th ...

  2. Activity 设置切换动画

    extends://blog.csdn.net/luohaowang320/article/details/42124225 | http://blog.csdn.net/xuewater/artic ...

  3. Swift - 触摸事件响应机制(UiView事件传递)

    import UIKit class FatherView: UIView { override func hitTest(point: CGPoint, withEvent event: UIEve ...

  4. java对象转化成String类型

    在java项目的实际开发和应用中,常常需要用到将对象转为String这一基本功能.本文将对常用的转换方法进行一个总结.常用的方法有Object#toString(),(String)要转换的对象,St ...

  5. redis数据持久化（快照/日志）：

    1.RDB快照的配置选项: save // 900内,有1条写入,则产生快照 save // 如果300秒内有1000次写入,则产生快照 save // 如果60秒内有10000次写入,则产生快照 ( ...

  6. ssh-keygen 不是内部或外部命令解决办法！

    在使用 git 的远程仓库的时候,生成秘钥的使用,会遇到ssh-keygen不是内部命令也不是外部命令的问题: 具体解决: 第一步:找到:Git/usr/bin目录下的ssh-keygen.exe(一 ...

  7. 微信小程序 --- if/else条件渲染

    if 条件渲染:当为真的时候显示,当为假的时候隐藏: else 条件渲染:当为真的时候隐藏,当为假的时候显示: <view wx:if="{{true}}">{{tex ...

  8. xp系统报错 windows explorer has encountered a problem and needs to close.We are sorry for the inconvenience

    xp系统遇到问题: 打开某个软件提示报错信息, windows explorer has encountered a problem and needs to close.We are sorry f ...

  9. 删除Excel中的复选框等控件

  10. ubuntu16.04下安装opencv-nonfree

    在写计算机视觉与导航技术的课程作业,是关于sift和surf特征的提取及匹配.因为opencv中都有直接的函数可以调用. 关于SIFT和SURF的特征在opencv的nonfree模块中,从字面意思就 ...