访问指定节点
通过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. Excel 2010 统计行数

    1. 首先选择一个空行 2.然后点击如下:公式 --- 3. 第一行:填写“103”,当然我也不能明白为啥填写103.照做就是了. 4.鼠标定位到 第二行 “Ref1”位置,然后 鼠标+shfit 按 ...

  2. poj2096 Collecting Bugs[期望dp]

    Collecting Bugs Time Limit: 10000MS   Memory Limit: 64000K Total Submissions: 5394   Accepted: 2670 ...

  3. EUI Scroller实现自定义图片轮播 组件ScrollView

    一 自定义组件如下 /** * 文 件 ScrollView.ts * 功 能: 滚动组件 * 内 容: 自定义组件,支持多张图片水平(垂直)切换滚动 * * Example: * 1. 从自定义组件 ...

  4. awk中的冒泡排序

    算法中经典的排序方式,今也用awk来实现下,代码如下: BEGIN { count=} {arrary[count]=$ count++ } END{ ;i>-;i--) { ;j<i;j ...

  5. Hibernate数据类型映射

    Hibernate映射类型分为两种:内置的映射类型和客户化映射类型.内置映射类型负责把一些常见的Java类型映射到相应的SQL类型:此外,Hibernate还允许用户实现UserType或Compos ...

  6. 【JavaScript算法】---快速排序法

    一.快速排序法概念 我们将一个杂乱无章的数组进行一个快速排序,可以先从一个数组中取一个中间值,将一个数组一分为2,左边的数组跟中间值进行比较,小的放在左边,大的放在右边.比较完毕后再次取中间值,再次比 ...

  7. LayoutSimple简易响应式CSS布局框架

    开发这个css布局的目的是为了少做一些重复的工作,一是前端或多或少会开发一些很小的响应式项目, 二是UI设计的出来的界面总是各种布局各种样式,这个时候如果前端去使用Bootstrap或者Foundat ...

  8. Jenkins之构建执行脚本权限问题

    Jenkins需要执行的脚本不在本机需要ssh免密码登陆到远程主机执行 Jenkins部署机ip地址为192.168.56.12 需要远程执行脚本的主机为192.168.56.11 设置好密钥可以使用 ...

  9. try...finally的妙用

    受博文 C#中Finally的一个不太常见的用法 的启发,正好在开发中遇到这样一段代码: public bool ChangeBlogApp(Guid userID, string oldBlogAp ...

  10. 基于Nginx+FastDFS搭建图片文件系统

    Nginx+fastdfs:https://www.cnblogs.com/chiangchou/p/fastdfs.html#_label0_1 缩略图:https://blog.csdn.net/ ...