DOM

基础知识

了解文档对象模型的概念
理解DOM的树形结构
DOM内部对象常用属性与方法
了解节点与元素的概念
使用DOM处理页面元素
1.节点之间关系
父节点：除文档节点之外的每个节点都有父节点。

和的父节点是节点文本节点 "链接" 的父节点是节点。子节点：节点有一个子节点：节点。 <title> 节点也有一个子节点：文本节点 "标题"。同辈（同级节点）：当节点分享同一个父节点时，它们就是同辈（同级节点）和是同辈，因为它们的父节点均是节点。后代：后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。所有的文本节点都是节点的后代，而第一个文本节点是节点的后代。先辈：先辈是某个节点的父节点，或者父节点的父节点，以此类推。所有的文本节点都可把节点作为先辈节点。

2.DOM的接口和类（继承关系）
Node 节点
Element 元素节点
HTMLElement HTML元素节点
Attr 属性节点
Document 文档节点
HTMLDocument HTML文档节点
NodeList 节点列表
NamedNodeMap 命名的节点映射
2.获取节点类型、名称、值
node的属性
nodeName 节点名称（大写）
nodeValue 节点值
nodeType 节点类型
应用实例
var x=document;
document.writeln(“节点类型：”+x.nodeType+"，节点名称："+x.nodeName+"，节点值："+x.nodeValue+".
");

node的属性
nodeName 节点名称（大写）
nodeValue 节点值
nodeType 节点类型
应用实例
var x=document;
document.writeln(“节点类型：”+x.nodeType+"，节点名称："+x.nodeName+"，节点值："+x.nodeValue+".
");

在这里插入图片描述
3.每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：
Document 对象可通过 window.document 属性对其进行访问。
因为window是全局环境的默认对象，所以可以直接使用document对其进行访问
4.向文档写入东西
document.writeln(“Hello World!”)
document.write(“

Hello World!

”)
document.write("Hello World! ","Hello You! ",“

Hello World!

”)
5.获取元素的引用
直接获取特定节点的引用
根据ID属性获取节点的引用
根据NAME属性获取节点引用的列表
根据标记名获取节点引用的列表
获取相邻节点的引用

直接获取特定节点
var x=document;
document.writeln(“节点类型：”+x.nodeType+"，节点名称："+x.nodeName+"，节点值："+x.nodeValue+".
");
var x=document.documentElement;
document.writeln(“节点类型：”+x.nodeType+"，节点名称："+x.nodeName+"，节点值："+x.nodeValue+".
");
var x=document.body;
document.writeln(“节点类型：”+x.nodeType+"，节点名称："+x.nodeName+"，节点值："+x.nodeValue+".
");

6.根据元素的ID属性获取元素
getElementById() 方法可返回对拥有指定 id 属性的第一个元素的引用。
语法
document.getElementById(id)
说明
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>

<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>

</body>
</html>

自定义简化版
getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：
function id(x) {
if (typeof x == “string”)
return document.getElementById(x);
return x;
}
上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，您只要在使用前编写 x = id(x) 就可以了。
7.NodeList对象
NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
注释：在一个节点列表中，节点被返回的顺序与它们在 XML 被规定的顺序相同。
NodeList 对象的属性
Length，可返回节点列表中的节点数目。
NodeList 对象的方法
item()，可返回节点列表中处于指定的索引号的节点。
8.获取文档中所有具有指定name属性值得元素的列表
getElementsByName() 方法可返回带有指定名称的对象的元素列表。
语法
document.getElementsByName(name)
说明
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

<html>
<head>
<script type="text/javascript">
function getElements() {
  var x=document.getElementsByName("myInput");
  alert(x.length);
  alert(x.item(0));
  alert(x[0]);
  }
</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="名为 'myInput' 的元素有多少个？" />
</body>

</html>

9.根据标记名选择子孙元素列表
Document 和 Element接口都具有getElementsByTagName() 方法，可返回子孙元素中带有指定标签名的节点列表
语法
document.getElementsByTagName(tagname)
Element对象.getElementsByTagName(tagname)
说明
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

<div><div/><div/></div>
<script type="text/javascript">
function getElements() {
var x=document.getElementsByTagName("div"); 
var y=x[0].getElementsByTagName("div"); 
alert(y.length);
alert(y.item(0));
}
</script>

10.获取相邻节点的引用
node的属性
parentNode 节点的父节点
childNodes 节点的子节点列表
firstChild 节点的首个子节点
lastChild 节点的最后一个子节点
nextSibling 节点的下一个同级节点
previousSibling 节点的前一个同级节点

<div id="parent">
    firstChild
    <div name="secondChild"></div>
    lastChild
    </div>
    <script type="text/javascript">
    var x=document.getElementById("parent"); 
    alert(x.firstChild.nodeValue);
    alert(x.lastChild.nodeValue);
    x=x.childNodes[1];
    alert(x.parentNode.id);
    alert(x.nextSibling.nodeValue);
    alert(x.previousSibling.nodeValue);
    </script>

11.创建新节点
Document 对象方法
createElement(“标记名”)
创建元素节点
createTextNode(“文本”)
创建文本节点
注意：新创建的节点并不会出现在文档中，必须添加到文档的某个节点之下
12.节点处理
Node 对象方法
cloneNode()
复制节点
appendChild()
向节点的子节点列表的结尾添加新的子节
insertBefore()
在指定的子节点前插入新的子节点。
replaceChild()
用新节点替换一个子节点
removeChild()
删除（并返回）当前节点的指定子节点
normalize()
合并相邻的Text节点并删除空的Text节点
13.cloneNode（）方法
cloneNode() 方法可创建指定的节点的精确拷贝。
此方法可返回所复制的节点。
语法：nodeObject.cloneNode(include_all)
参数描述：include_all必需。假如逻辑参数被设置为真，那么被克隆的节点会克隆原节点的所有子节点。
返回值：当前节点的副本。
说明
该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。
返回的节点不属于文档树，它的 parentNode 属性为 null。
当复制的是 Element 节点时，它的所有属性都将被复制。但要注意，当前节点上注册的事件监听器函数不会被复制。

appendChild（）方法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
此方法可返回这个新的子节点。
语法：appendChild(newchild)
参数描述：newchild所添加的节点
返回值：加入的节点。
描述
该方法将把节点 newchild 添加到文档中，使它成为当前节点的最后一个子节点。
如果文档树中已经存在了 newchild，它将从文档树中删除，然后重新插入它的新位置。如果 newchild 是 DocumentFragment 节点，则不会直接插入它，而是把它的子节点按序插入当前节点的 childNodes[] 数组的末尾。
注意，来自一个文档的节点（或由一个文档创建的节点）不能插入另一个文档。也就是说，newchild 的 ownerDocument 属性必须与当前节点的 ownerDocument 属性相同。

insertBefore（）方法
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
此方法可返回新的子节点。
语法：insertBefore(newchild,refchild)
参数描述：
newchild插入新的节点
refchild在此节点前插入新节点

replaceChild（）方法
replaceChild() 方法可将某个子节点替换为另一个。
如替换成功，此方法可返回被替换的节点，如替换失败，则返回 NULL。。
语法：
nodeObject.replaceChild(new_node,old_node)
参数描述
new_node必需。指定新的节点。
old_node必需。指定被替换的节点。

removeChild（）方法
removeChild() 方法可从子节点列表中删除某个节点。
如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
语法：
nodeObject.removeChild(node)
参数描述
node必需。指定需要删除的节点

normalize（）方法
合并相邻的 Text 节点并删除空的 Text 节点。
语法：
nodeObject.normalize() 说明
这个方法将遍历当前节点的所有子孙节点，通过删除空的 Text 节点，合并所有相邻的 Text 节点来规范化文档。
该方法在进行节点的插入或删除操作后，对于简化文档树的结构很有用。

14.添加节点

<body>
    <script type="text/javascript">
    var x=document.createElement("div");
    x.appendChild(document.createTextNode("文本"));
    document.body.appendChild(x);
    </script>
    </body>

15.复制节点

<div>原节点</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div");
var y=x[0].cloneNode(true);
y.firstChild.nodeValue="新节点";
x[0].parentNode.insertBefore(y,x[0]);
</script>

16.替换节点

<div>原节点</div>
<script type="text/javascript">
var x=document.createElement("div");
x.appendChild(document.createTextNode("新节点"));
var y=document.getElementsByTagName("div");
document.body.replaceChild(x,y[0]);
</script>

17删除节点

<div>节点1</div>
<div>节点2</div>
<script type="text/javascript">
var y=document.getElementsByTagName("div");
y[0].parentNode.removeChild(y[0]);
</script>

18.规格化文本

<body>
    <script type="text/javascript">
    var x=document.createElement("div");
    x.appendChild(document.createTextNode("文本1 "));
    x.appendChild(document.createTextNode("文本2 "));
    //document.body.appendChild(x);
    alert(x.firstChild.nodeValue);//文本1
    x.normalize();
    alert(x.firstChild.nodeValue);//文本1 文本2
    </script>
    </body>

19.NamedNodeMap接口
NamedNodeMap用于获取属性的引用的集合
NamedNodeMap会被自动更新
NamedNodeMap 的属性
length，可返回列表中的节点数目
NamedNodeMap 对象的方法
getNamedItem()
可返回指定的节点（通过名称）
item()
可返回处于指定索引号的节点
节点次序是不确定的
removeNamedItem()
可删除指定的节点（根据名称）
20.属性处理
Element 对象的属性
attributes 返回元素的属性的 NamedNodeMap
Element 对象的方法
getAttribute() 返回属性的值。
getAttributeNode() 以 Attribute 对象返回属性节点。
hasAttribute() 返回元素是否拥有指定的属性。
hasAttributes() 返回元素是否拥有属性。
removeAttribute() 删除指定的属性。
removeAttributeNode() 删除指定的属性节点。
setAttribute() 添加新属性。

<body><div id="a" n="b"></body>
    <script type="text/javascript">
    var x=document.getElementById("a");
    //alert(x.getAttribute("n"));
    //x.setAttribute("Name","c");
    //alert(x.getAttribute("Name"));
    //x.removeAttribute("Name");
    //alert(x.hasAttribute("n"));
    //alert(x.hasAttributes());
    var y=x.attributes;
    alert(y.length);
    for(var i in y)document.writeln(i+":"+y[i]+"\n");
    </script>

21.HTMLElement 对象继承了 Node 和 Element 对象的标准属性，也实现了下面所描述的几个非标准属性：
className
规定元素的 class 属性。注意：该属性名不是 “class”，因为 “class” 是 JavaScript 中的保留字。
类型：String。状态：可写。
currentStyle
这一特定于 IE 的属性应用于元素的所有 CSS 属性的级联组。它是 Window.getComputedStyle() 的仅用于 IE 的替代。
类型：String。状态：可写。
dir
规定元素的 dir 属性，声明了文档文本的方向。
类型：String。状态：可写。
id
规定元素的 id 属性。在一个文档中，没有两个元素具有相同的 id 值。
类型：String。状态：可写。

JavaScript-⑦

DOM

Hello World!

猜你喜欢