DOM全称是document object model(文档对象模型)，DOM是用来干什么的呢？假设把你的文档看成一个单独的对象，DOM就是如何用HTML或者XML对这个对象进行操作和控制的标准。
一、获取元素
使用Javascript编程时，获取文档的元素是使用DOM的基本方式。下面将介绍其中两个用来获取元素的基本方法：getElementById()和getElementsByTagName()。
1、通过ID获取元素
getElementById()方法是DOM中频繁使用的一个方法。它获取HTML文档的一个特定元素并且返回一个对它的引用。为了获取元素，它必须具有一个ID属性。
举例如下：
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}</div>
2、通过标签名获取
当只获取一个或几个元素时，getElementById（）方法工作的很好，但是当我需要同时获取超过一个的元素时，就发现getElementsByTagName()方法更合适。后者是通过数组或者列表的格式返回指定标签类型的所有元素。
举例如下：
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
window.onload = function () {
var str = document.getElementsByTagName("p")[1].innerHTML;
alert(str); //输出 我是第二个P，因为获取的是索引为1的P，索引从0开始
}
window.onload = function () {
var arr = document.getElementsByTagName("p");
for (var i = 0; i < arr.length; i++) {
alert(arr[i].innerHTML);
}
}
window.onload = function () {
var node = document.getElementById("div1");
var node1 = document.getElementsByTagName("p")[1]; //从获取到的元素再获取
alert(node1.innerHTML);
}</div>
3、通过属性名获取
getElementsByName() 方法可返回带有指定名称的对象的集合。
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素
<html>
<head>
<script type="text/javascript">
<--返回所有name=myInput的元素对象集合-->
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />
</body>
</html>
<--获取对象中下标为1的对象的值-->
var x=document.getElementsByName("myInput")[1].value;
<--获取对象中下标为1的对象-->
var x=document.getElementsByName("myInput")[1];
var y=x.getAttribute("type");
alert(y);
二、操作属性
1、getAttribute()与setAttribute()
getAttribute()是读取属性内容，setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。
2、举例
<title>Untitled Document</title>
<script language="JavaScript">
function change() {
var input = document.getElementById("li1");
alert(input.getAttribute("title"));
input.setAttribute("title", "mgc");
alert(input.getAttribute("title"));
}
</script>
<ul id="u">
<li title="hello" id="li1">Magci</li>
<li>J2EE</li>
<li>Haha!</li>
</ul>
<input onclick="change();" type="button" value="Change">
相关推荐
### JS常用属性与方法详解 JavaScript（简称JS）是一种广泛使用的、基于原型的脚本语言，主要用于网页开发，提供交互性和动态更新的能力。在JS中，掌握数组的属性和方法对于编写高效、灵活的代码至关重要。 #### ...
本篇文章主要聚焦于JavaScript中的一些常用属性和方法，特别是针对文档对象模型（DOM）的操作。 1. **document对象**：作为JavaScript中的全局对象，它代表了整个HTML或XML文档。例如，`document.title`用于设置或...
以上就是文档中所提到的一些JavaScript常用属性和方法的详解。通过这些知识点，可以构建基础的前端网页交互功能，以及进行更复杂的编程任务。需要注意的是，文档中的文字有些是通过OCR扫描识别出来的，可能会存在...
在IT行业中，ExtJS是一个广泛使用的JavaScript库，用于构建富客户端Web应用程序。它提供了一套完整的组件模型，包括各种UI控件和数据管理工具。本文将深入探讨"Ext常用属性总结"这一主题，帮助开发者更好地理解和...
**JavaScript中常用的属性与方法** JavaScript提供了丰富的内置属性和方法，如： - `this`关键字：根据上下文引用当前对象。 - `prototype`：用于扩展对象的属性和方法。 - `Object.keys()`：返回对象的所有可枚举...
本文将详细介绍`String`对象的一些常用属性和方法，并通过示例代码来加深理解。 #### 1. String 对象的基本介绍 在JavaScript中，字符串是一种原始数据类型，用于存储文本。`String`对象则是用于表示这些字符串值...
详细的汇总了CSS常用属性，css+div配合。适合初学者或或以适应着查询。
一、JavaScript常用函数 1. 数组操作函数 - `push()`: 向数组末尾添加一个或多个元素，并返回新长度。 - `pop()`: 删除并返回数组最后一个元素。 - `shift()`: 删除并返回数组第一个元素。 - `unshift()`: 在...
JavaScript获取网页表单的action属性是一种常用的操作，通常用于获取表单提交时要发送到的URL地址。在Web开发中，表单是用来收集用户输入数据并将其发送到服务器的HTML元素。action属性指定了表单提交后，服务器处理...
这些只是JavaScript中常用对象的一部分，还有更多如`Document`（DOM操作）、`Event`（事件处理）等对象，它们共同构建了JavaScript的丰富功能。理解并熟练使用这些对象，是成为一个高效的JavaScript开发者的关键。
在深入探讨Extjs常用属性之前，我们先简要回顾一下Extjs是什么。...以上是对给定文件描述中涉及的Extjs常用属性的详细解析，这些属性在实际开发中非常有用，掌握它们可以帮助开发者更灵活地控制界面布局和控件行为。
#### 二、Ext JS常用属性详解 ##### 2.1 title (标题) **作用：** 用于设置组件的标题。 **示例代码：** ```javascript var panel = new Ext.Panel({ title: '基本信息', width: 400, height: 300 }); ``` ###...
在这个文档中，我们将深入探讨 `jquery.layout.js` 的一些常用属性及其功能。 首先，确保引入必要的文件，包括 `jquery.js`，`jquery-ui.js` 和 `jquery.layout-latest.js`。值得注意的是，从官方站点下载的最新...
### JavaScript 解析 XML 常用对象、属性与方法详解 在 Web 开发中，XML（可扩展标记语言）作为一种常见的数据交换格式被广泛应用。JavaScript 作为前端开发的主要语言之一，能够有效地处理 XML 数据，这对于实现...
本章将详细探讨这两个元素的常用属性，以便开发者更好地掌握它们的使用方法。 首先，`<video>`元素用于在网页中嵌入视频内容。它支持多种视频格式，如MP4、WebM和Ogg，可以通过`src`属性指定视频源。例如： ```...
在JavaScript中，遍历属性、理解`prototype`和掌握继承机制是编程中不可或缺的基本技能。本文将深入探讨这些概念，并通过实例来加深理解。 首先，让我们来看如何遍历JavaScript对象的属性。JavaScript提供了多种...
下面将详细解释提供的100个JavaScript常用语法中的部分关键知识点： 1. `document.write("")`：这个方法常用于在HTML文档加载时直接向文档输出内容。 2. 注释：在JS中，单行注释以`//`开始，多行注释以`/* */`包围...
"网站开发中常用JS文件"这个压缩包集合了两个重要的JS应用实例：淘宝网广告代码和产品图片超美显示技术。 首先，淘宝网广告代码是淘宝电商平台在网站上实现广告展示的关键。这些代码通常涉及到DOM操作，用于在网页...
在JavaScript中，存在许多常用的属性和方法，这些属性和方法是编写高效、可维护的JavaScript代码的关键。 首先，`align`属性用于设置元素的对齐方式，如`left`、`center`、`right`，而`vertical-align`则控制元素的...
这里我们将探讨一些在实际工作中常用的JavaScript技巧，以帮助你提升编程效率和代码质量。 1. **变量声明与作用域** - 使用`let`和`const`替代`var`来避免变量提升和作用域污染。 - `let`允许块级作用域，`const`...