1.DOM 方法
一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
2.DOM属性
innerHTML 属性
获取元素内容的最简单方法是使用 innerHTML 属性。
innerHTML 属性对于获取或替换 HTML 元素的内容很有用。
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
<html>
<body> <p id="intro">Hello World!</p> <script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script> </body>
</html>
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
3.DOM - 元素
创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var element=document.getElementById("div1");
element.appendChild(para);
</script>
例子解释
这段代码创建了一个新的 <p> 元素：
var para=document.createElement("p");
如需向 <p> 元素添加文本，您首先必须创建文本节点。这段代码创建文本节点：
var node=document.createTextNode("This is a new paragraph.");
然后您必须向 <p> 元素追加文本节点：
para.appendChild(node);
最后，您必须向已有元素追加这个新元素。
这段代码查找到一个已有的元素：
var element=document.getElementById("div1");
这段代码向这个已存在的元素追加新元素：
element.appendChild(para);
创建新的 HTML 元素 - insertBefore()
语法
node.insertBefore(newnode,existingnode)
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| newnode | Node 对象 | 必需。需要插入的节点对象。 |
| existingnode | Node object | 可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。 |
返回值
| 类型 | 描述 |
|---|---|
| Node 对象。 | 您插入的节点。 |
上一个例子中的 appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此，您可以使用 insertBefore() 方法：
实例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
删除已有的 HTML 元素 – removeChild( )
定义和用法
removeChild() 方法指定元素的某个指定的子节点。
以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
如需删除 HTML 元素，您必须清楚该元素的父元素：
实例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
例子解释
这个 HTML 文档包含一个带有两个子节点（两个 <p> 元素）的 <div> 元素：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
查找 id="div1" 的元素：
var parent=document.getElementById("div1");
查找 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
提示：能否在不引用父元素的情况下删除某个元素？
很抱歉。DOM 需要了解您需要删除的元素，以及它的父元素。
这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
替换 HTML 元素 - replaceChild( )
如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法：
node.replaceChild(newnode,oldnode)
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| newnode | Node object | 必需。您希望插入的节点对象。 |
| oldnode | Node object | 必需。您希望删除的节点对象。 |
实例
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.replaceChild(para,child);
</script>
DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素的更多相关文章
-
JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
-
iOS开发中XML的DOM和SAX解析方法
一.介绍 dom是w3c指定的一套规范标准,核心是按树形结构处理数据,dom解析器读入xml文件并在内存中建立一个结构一模一样的“树”,这树各节点和xml各标记对应,通过操纵此“树”来处理xml中的文 ...
-
JQ中的clone()方法与DOM中的cloneNode()方法
JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...
-
查看DOM对象的style样式，attributes属性，children
// 在不同的浏览器查看各种属性,样式.如果不知道哪个对象的属性样式怎么写,可以在控制台输出 style attributes// 所有的属性样式都会出现// 此外还可以检查某个属性在不同浏览器是否 ...
-
JQuery DOM操作：设置内容&;属性&;添加元素&;插入元素&;包裹&;克隆&;移除&;替换
JQuery text().html().val() $(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象 $(elem).text():返回第一个elem标 ...
-
DOM的本质 和 方法
<JavaScript DOM编程艺术> 读书笔记 一句话解释DOM: DOM,即我们所看到的网页,其在浏览器背后的文档结构(树状分支结构),涵盖了每一个节点(称之为对象).可以通过JS等 ...
-
节点属性（DOM对象）
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
-
jquery和dom对象相互转化的方法
jQuery对象转成DOM对象: 两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得 ...
-
Javascript进阶篇——(DOM—getAttribute()、setAttribute()方法)—笔记整理
getAttribute()方法通过元素节点的属性名称获取属性的值.语法: elementNode.getAttribute(name) 1. elementNode:使用getElementById ...
随机推荐
-
利用flash精确定位asp.net的图像热点区域
Asp.net的热点区域控件非常有用,但是对于热点区域如何精确定位,设定矩形,圆和多边形要素点的位置,用flash能够精确定位,在flash中制作热点区域的部分,可以是矩形,图形或者文字,然后对于这部 ...
-
c++保留小数问题，如有不足或错误，欢迎指出
#include<iostream> #include <iomanip> using namespace std; int main() { double a; cin> ...
-
Lookup 组件异常
Lookup组件有两个数据源,一个是上流组件的输出,一个是组件lookup的数据源,这个数据源是在Connection选项卡中进行配置.在开发package的过程中,我发现一个异常,当Lookup数据 ...
-
hdu 1318 Palindromes
Palindromes Time Limit:3000MS Memory Limit:0KB 64bit ...
-
sql server 跨库操作
SELECT *FROM OPENDATASOURCE('SQLOLEDB','Data Source=sql服务器名;User ID=用户名;Password=密码;').PersonDb.dbo. ...
-
POJ 3667 Hotel (线段树区间合并)
题目链接:http://poj.org/problem?id=3667 最初给你n间空房,m个操作: 操作1 a 表示检查是否有连续的a间空房,输出最左边的空房编号,并入住a间房间. 操作2 a b ...
-
VS C# 嵌入互操作类型
SQLDMO.Restore oRestore = new SQLDMO.RestoreClass(); SQLDMO.SQLServer oSQLServer = new SQLDMO.SQLSer ...
-
Lambda表达式图解
internal delegate int MyDel(int x); public class Lambda { ; };//匿名方法 ; };//Lambda表达式 ; };//Lambda表达式 ...
-
SZU:D89 The Settlers of Catan
Judge Info Memory Limit: 65536KB Case Time Limit: 3000MS Time Limit: 3000MS Judger: Number Only Judg ...
-
Springboot读取配置文件及自定义配置文件
1.创建maven工程,在pom文件中添加依赖 <parent> <groupId>org.springframework.boot</groupId> <a ...