DOM常用的访问方法

⑴ 常见的DOM操作有哪些

前言

DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM 脱胎于 Netscape 及微软公司创始的 DHTML（动态 HTML），但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

阅读目录

基本概念
节点创建型api
页面修改型API
节点查询型API
节点关系型api
元素属性型api
元素样式型api

总结

文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。

基本概念

在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。

Node类型

DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。

Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：

Node.ELEMENT_NODE:1
Node.ATTRIBUTE_NODE:2
Node.TEXT_NODE:3
Node.CDATA_SECTION_NODE:4
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7
Node.COMMENT_NODE:8
Node.DOCUMENT_NODE:9
Node.DOCUMENT_TYPE_NODE:10
Node.DOCUMENT_FRAGMENT_NODE:11
Node.NOTATION_NODE:12

假设我们要判断一个Node是不是元素，我们可以这样判断
if(someNode.nodeType == ){ console.log("Node is a element"); }
这些Node类型中，我们最常用的就是element，text，attribute，comment，document，document_fragment这几种类型。
我们简单来介绍一下这几种类型：

Element类型

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：

（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

⑵ 常用的 HTML DOM 属性是什么

常用的属性有，innerHTML属性、nodeName属性、nodeValue属性、nodeType属性等。

1、innerHTML属性，是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

2、nodeName属性，规定节点的名称。nodeName 是只读的。

3、nodeValue属性，规定节点的值。对于元素类型的节点，其nodeValue 是 undefined 或 null；对于文本类型的节点，其nodeValue 是文本本身；对于属性类型的节点，其nodeValue是属性值。

4、nodeType属性，返回节点的类型。nodeType 是只读的。比较重要的节点类型有，元素（类型值为1），属性（类型值为2），文本（类型值为3），注释（类型值为8），文档（类型值为9）。

(2)DOM常用的访问方法扩展阅读

1、DOM属性访问方式

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是您能够执行的动作（比如添加或修改元素）。属性是您能够获取或设置的值（比如节点的名称或内容）。

2、DOM其他属性

innerText属性设置或获取位于对象起始和结束标签内的文本，disabled属性获取表明用户是否可与该对象交互的值，nextSibling属性获取对此对象的下一个兄弟对象的引用，tagName属性获取对象的标签名称。

参考资料

网络-DOM

⑶ DOM的访问节点

你可通过若干种方法来查找您希望操作的元素：
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素。
这两种方法会忽略文档的结构。假如您希望查找文档中所有的 <p> 元素，getElementsByTagName() 会把它们全部找到，不管 <p> 元素处于文档中的哪个层次。同时，getElementById() 方法也会返回正确的元素，不论它被隐藏在文档结构中的什么位置。
这两种方法会向您提供任何你所需要的 HTML 元素，不论它们在文档中所处的位置！
getElementById() 可通过指定的 ID 来返回元素：
getElementById() 语法
document.getElementById("ID");注释：getElementById() 无法工作在 XML 中。在 XML 文档中，您必须通过拥有类型 id 的属性来进行搜索，而此类型必须在 XML DTD 中进行声明。
getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素：
getElementsByTagName() 语法
document.getElementsByTagName("标签名称");或者：
document.getElementById('ID').getElementsByTagName("标签名称"); 下面这个例子会返回文档中所有 <p> 元素的一个节点列表：
document.getElementsByTagName("p"); 下面这个例子会返回所有 <p> 元素的一个节点列表，且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代：
document.getElementById('maindiv').getElementsByTagName("p"); 当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：
var x=document.getElementsByTagName("p");现在，变量 x 包含着页面中所有 <p> 元素的一个列表，并且我们可以通过它们的索引号来访问这些 <p> 元素。
注释：索引号从 0 开始。
您可以通过使用 length 属性来循环遍历节点列表：
var x=document.getElementsByTagName("p"); for (var i=0;i<x.length;i++) { // do something with each paragraph }您也可以通过索引号来访问某个具体的元素。
要访问第三个 <p> 元素，您可以这么写：
var y=x[2];
parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段：
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
在上面的HTML代码中，第一个 <td> 是 <tr> 元素的首个子元素（firstChild），而最后一个 <td> 是 <tr>元素的最后一个子元素（lastChild）。
此外，<tr> 是每个 <td>元 素的父节点（parentNode）。
对 firstChild 最普遍的用法是访问某个元素的文本：
var x=[a paragraph]; var text=x.firstChild.nodeValue;parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv"); x.parentNode.removeChild(x);首先，您需要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。

⑷ js 如何减少dom访问

减少访问DOM的次数提升javascript性能。
1.批量读写
当我们需要获取某一属性，这一属性需要计算才能得到，并且队列中存在尚未提交的DOM修改操作，则此时，DOM修改操作的队列将会被提交。
为了提高效率，减少更新render tree的次数，可以先统一读取属性，然后统一修改DOM，这样，就可以减少更新render tree的次数。
2.虚拟结点
当我们需要对DOM做出大量修改时，可以先创建一个虚拟结点，将所有修改附加在该节点，最后将该虚拟节点一次性提交给在render tree上存在的结点，则相当于只提交了一次修改操作。
3.查找元素的优化

因为ID是唯一的，也有原始的方法，因此使用ID查找元素是最快的，其次的是根据类和类型查找元素，通过属性查找元素是最慢的，因此应该尽可能的通过ID或者类来查找元素，避免通过类来查找元素。
4.改变DOM，包括添加，修改，删除DOM
改变DOM就会引起浏览器渲染，而渲染是相当慢的，因此应该避免不必要的渲染。
5.改变DOM的样式类等

改变DOM元素的样式，类也会导致浏览器渲染，因此也应该减少不必要的操作。
6.减少iframe

iframe需要消耗大量的时间，并阻塞下载，应该少用。
7.样式放在head中，脚本放在关闭标签</body>之前

样式放在head中，可以加快渲染，脚本放在关闭标签</body>之前可以加快下载速度，不免阻塞下载。

⑸ JS操作DOM的几个属性与方法

W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。

DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。

⑹ 简述文档对象模型中常用的查找访问元素节点的方法。

1. 通过ID,使用 getElementById() 获得标签节点
2. 通过标签的名称,使用getElementsByTagName() 获得元素节点或标签节点
注意：以上的查找方式都会忽略文档的结构
3. 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
4. 节点名称nodeName
a) 如果节点是标签，nodeName是标签名称
b) 如果节点是属性，nodeName是属性名称
c) 如果节点是文本节点，nodeName是#text
d) 如果节点是文档，nodeName是#document
5. 节点值nodeValue
6. 节点类型nodeType

⑺ 怎么样用asp技术访问dom接口的方法

<%
'初始化变量
dim xmld
'建立XML对象
set xmld=Server.CreateObject("Microsoft.XMLDOM")
'创建属性是否独立使用的
xmld.async=false
'载入在服务器上的XML文件
xmld.load(server.mappath("skin.xml"))

%>

⑻ DOM访问元素节点有几种方法分别是哪些

1. 通过顶层document节点获取：
（1） document.getElementById(elementId) ：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。
如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。
（2）document.getElementsByName(elementName) ：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。
（3）document.getElementsByTagName(tagName) ：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应用其他的节点，下面将会提到。
2、通过父节点获取：
（1）parentObj.firstChild ：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。
（2）parentObj.lastChild ：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。
在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild...
（3）parentObj.childNodes ：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
注意 ：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
（4）parentObj.children ：获取已知节点的直接子节点数组。
注意 ：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
（5）parentObj.getElementsByTagName(tagName) ：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取：
（1）neighbourNode.previousSibling ：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
（2）neighbourNode.nextSibling ：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
4、通过子节点获取：
（1）childNode.parentNode ：获取已知节点的父节点。
上面提到的方法，只是一些基本的方法，如果使用了Prototype等JavaScript库，可能还获得其他不同的方法，例如通过节点的class获取等等。不过，如果能够灵活运用上面的各种方法，相信应该可以应付大部分的程序。
【注意】这是转载的文档：其中通过firstChild和lastChild获得HTML Node是不可取的。因为，根据浏览器的不同，firstChild有可能返回parentObj的属性对象。

⑼ JS怎样访问DOM对象的指定节点

方法很多：
1、document.getElementById通过id访问节点
2、document.querySelector通过节点的属性选择器选择节点，结果是一个，这个用的比较多
3、document.querySelectorAll通过节点的属性选择器选择节点，结果一个列表，可能是多个元素
4、document.getElementByTagName, document.getElementByClass这两个比较少用，后一个兼容性好像不是很好

⑽ 常用的 HTML DOM 方法有哪些

常用的 HTML DOM 方法：

• getElementById(id) - 获取带有指定 id 的节点（元素）

• appendChild(node) - 插入新的子节点（元素）

• removeChild(node) - 删除子节点（元素）