javascript实现DOM（基础）

最新推荐文章于 2022-08-02 10:33:57 发布

mynameisshine

最新推荐文章于 2022-08-02 10:33:57 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript function input table html border

本文链接：https://blog.csdn.net/mynameisshine/article/details/2116921

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

/*
javascript实现DOM（基础）
author:shine
*/
DOM是一种文档对象模型，它定义了操作xml文档的方法和属性，但是它只是一系列接口，是由别的语言来实现，如：java中xerces，javascript,.net等

等，虽然实现方式各异，但有一样是不会变的，那就是DOM API，在正式进入我们的主题前，先来看看常用的DOM API（大致有个印象就行，后面会详

解）：

1.常用DOM API(void表示没有返回值，或没有参数)
1）DOMDocument对象表示整个xml文件的文档结构，javascript中已经内置了这个对象document。所有其他的节点都是有它生成。
属性：
名字    类型  说明
documentElement    Element  表示xml文件的根节点
方法：
名字    返回值  参数  说明
createElement(tagName);  Element  String  创建一个Element节点
createTextNode(text);  Text  String  创建一个Text节点
createAttribute(name);  Attr  String  创建一个属性节点
createDocumentFragment();    DocumentFragment void 创建一个文档片段
getElementById(id);  Element  String  按照元素id属性获得元素
getElementsByTagName(tagName); NodeList  String  按照元素标签名称获得元素列表
getElementsByName(name);  NodeList  String  按照元素name属性获得元素列表

2) DOMNode对象 DOM中主要的对象，DOMAttribute，DOMElement，DOMText都继承于此对象。
属性：
名字    类型  说明
nodeName   String  节点的名字
nodeValue   String  节点的值
nodeType   Number  节点的类型
parentNode   Node  父节点
nextSibling    Node  下一个兄弟节点
previousSibling    Node  上一个兄弟节点
owerDocument   Document  所属文档
childNodes   NodeList  子节点列表
firstChild   Node  第一个子节点
lastChild    Node  最后一个子节点
attributes   NamedNodeMap 属性列表

方法：
名字    返回值  参数  说明
removeChild(node)   void Node  删除子节点
appendChild(node)    void Node  添加子节点

3）DOMElement对象表示DOM中的“标签元素”，继承于Node，所以Node中的属性和方法可以用。除此之外还有几个有用的方法。
（除Node对象的方法和属性外，还有：）
方法：
名字    返回值  参数  说明
setAttribute(attrName,value)    String,String 设置属性
getAttribute(attrName)  String  String  得到属性
removeAttribute(attrName)  void  String  删除属性

4）DOMAttribute对象表示元素属性。
（除Node对象的方法和属性外，还有：）
属性：
名字    类型  说明
name    String  属性的名称
owerElement   Element  属性所属的元素
value    String  属性的值

5）DOMText对象表示元素的文本节点。
（除Node对象的方法和属性外，还有：）
属性
名字类型说明
length Number 文本的长度

6）DOM NodeList 节点列表(辅助对象之一，List结构)
属性：
名字    类型  说明
length    Number  列表的长度
方法：
名字    返回值  参数  说明
item(i)    Node  Number  获得指定下标的节点

7）DOM NamedNodeMap 节点Map(辅助对象之二，Map结构)
属性：
名字    类型  说明
length    Number  Map的长度
方法：
名字    返回值  参数  说明
item(i)    Attr  Number  获得指定下标的节点
getNamedItem(name)  Attr  String  获得指点名称的节点
removeNamedItem(name)  void  String  删除指定名称的节点

大致看了一下DOMAPI后，开始进入正题：
2.使用DOM：
1）访问相关节点：
exp:
function test() {
var oHtml = document.documentElement;
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
//第二种方式得到body：var oBody = oHtml.childNodes[0];
//第三种方式得到body：var oBody = document.body

alert(oHead.parentNode == oHtml);
alert(oBody.parentNode == oHtml);
alert(oHead.nextSibling == oBody);
alert(oBody.previousSibling == oHead);
alert(oHtml.ownerDocument == document);
}

注意：
写完js,然后在body标签中加入事件：<body οnlοad="text();">（后面的例子都是这样，千万不要在<script>标签中直接写代码测试，因为

javascript,html是解释执行的，即：一行一行的执行，如果直接写入，很可能body等标签还没有生成，就在javascript中调用了，所以最好放在函数

function中，用onload触发）

2）检测节点类型：
function test() {
//常用的节点类型，由于IE只支持数字，不支持字符常量如：ELEMENT_NODE,可以使用枚举进行转换
var Node = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
DOCUMENT_NODE: 9
}

var oHtml = document.documentElement;
alert(oHtml.nodeType == Node.ELEMENT_NODE);
alert(document.nodeType== Node.DOCUMENT_NODE );
}

3）处理特性
ELement中有一个attributes属性，它是NamedNodeMap类型，所以它可以使用NamedNodeMap的方法(DOM API已经提到)
在test1.html中加入一行：<p id="a1" align="center">I love you</p>

// JavaScript Document
function test() {
var op = document.getElementById("a1"); //通过指定id属性获得元素
//设置op元素属性id和align的方法一
//op.attributes.getNamedItem("id").nodeValue = "a5";
//op.attributes.getNamedItem("align").nodeValue = "right";
//方法二
op.setAttribute("id","a6");
op.setAttribute("align","left");

//获得op元素属性id和align的方法一
//var id = op.attributes.getNamedItem("id").nodeValue;
//var align = op.attributes.getNamedItem("align").nodeValue;
//方法二
var id = op.getAttribute("id");
var align = op.getAttribute("align");

alert(id);
alert(align);
}

4）访问指定节点：
a. getElementsByTagName() 返回指定标签名的元素集。
在test1.html中加入：
<p id="a1" align="center">I love you</p>
<p id="a2" align="center">But you don't know</p>

// JavaScript Document
function test() {
var op1 = document.getElementsByTagName("p");
alert(op1.length);
alert(op1[0].childNodes[0].nodeValue); //获得第一个<p>中的文本
alert(op1[1].childNodes[0].nodeValue); //获得第二个<p>中的文本
}

b. getElementByName() 返回指定标签name属性的元素集
（这个例子完成了“全选”的功能）
test1.html中加入：
<form method="post">
<input type="checkbox" name="color" value="red" /> red<br/>
<input type="checkbox" name="color" value="green" /> green<br/>
<input type="checkbox" name="color" value="blue"/> blue<br/>
<input type="checkbox" name="color" value="all" onClick="test();"/>全选
</form>

// JavaScript Document
function test() {
var allBoxes = document.getElementsByName("color"); //得到所有name属性为color的节点
var allSelected = allBoxes.item(allBoxes.length - 1); //得到最后一个全选节点
//全选
for(var i=0;i<allBoxes.length;i++) {
  if(allSelected.checked)
   allBoxes.item(i).checked = true;
  else
   allBoxes.item(i).checked = false;
}
}

c. getElementById() 返回指定标签id属性的元素。（前面的例子中多次用到，就不再举例）
注；IE中的Bug：有时getElementById()会按照name取，而不是id,其实是有原因的：因为HTML是解释执行，即一行一行的执行，那么在IE中会按照

name和id同时一行一行的寻找匹配的元素，如：
var o = getElementById("color1")
alert(o.value);
第一种情况：
<input type="checkbox" id="color1" name="color" value="green" /> green<br/>
<input type="checkbox" id="aaa" name="color1" value="red" /> red<br/>
输出是：green

第二种情况：
<input type="checkbox" id="color" name="color1" value="green" /> green<br/>
<input type="checkbox" id="color1" name="aaa" value="red" /> red<br/>
输出是：green

第三种情况：
<input type="checkbox" id="aaa" name="color1" value="red" /> red<br/>
<input type="checkbox" id="color" name="color1" value="green" /> green<br/>
输出是：red

第四种情况：
<input type="checkbox" id="color1" name="aaa" value="red" /> red<br/>
<input type="checkbox" id="color1" name="color" value="green" /> green<br/>
输出是：red

从上面的四种情况可以看出，不论是name属性还是id属性，只要“解释”到的那一个元素中有任意一个匹配，该元素就会被返回，又由于getElementById

只选一个元素，所以它只会选择最先匹配的元素（不论name还是id）。

5）创建和操作节点
这个例子是把arrText数组中的元素加入到body中。
方法一：
// JavaScript Document
function test() {
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
for(var i=0; i<arrText.length; i++) {
  var element = document.createElement("p");
  var text = document.createTextNode(arrText[i]);
  element.appendChild(text);
  document.body.appendChild(element);
}
}
如果使用方法一，就要调用10次document.body.appendChild(element)，也就会使页面刷新10次。可以使用DocumentFragment()解决。

方法二：
// JavaScript Document
function test() {
var arrText = ["one","two","three","four","five","six","seven","eight","nine","ten"];
var fragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++) {
  var element = document.createElement("p");
  var text = document.createTextNode(arrText[i]);
  element.appendChild(text);
  fragment.appendChild(element);
}
document.body.appendChild(fragment);
}

3.HTML DOM特性
看过我另一篇文章“DOM解析轻松入门（三）--DOM Level2 Modules”的朋友，对HTML DOM并不陌生，“DOM Level 2 HTML (HTML)：扩展DOM提供

了把HTML文档结构作为XML处理的接口。”没错，HTML DOM 就是 DOM Level2中的一个Moduel。
1）让特性像属性一样
如：
<img src="2.jpg" border="1" id="img1" />

按照我们前面的方法得到或设置img的src和border属性：
// JavaScript Document
function test() {
var img = document.getElementById("img1");
alert(img.getAttribute("src"));
img.setAttribute("border","0");
alert(img.getAttribute("border"));
}

而使用HTML DOM：
// JavaScript Document
function test() {
var img = document.getElementById("img1");
alert(img.src);
img.border = 0;
alert(img.border);
}

现在该明白什么叫做“让特性像属性一样”吧。
注意：
大多数特性名和属性名一样，只有一个特殊即：class，它在css中是类选择器，它对应的是className，如：
<div id ="div1" class="header"></div>

var div= document.getElementById("div1");
alert(div.className);

2）table方法。
在DOM HTML中对table也做了改善，下面这个例子是遍历table。
准备一个table
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
</tr>

遍历table：
// JavaScript Document
function test() {
var table = document.getElementById("myTable");
for(var i=0; i<table.rows.length; i++)
for(var j=0; j<table.rows[i].cells.length; j++)
alert(table.rows[i].cells[j].innerText);
}
说明：
这里只用注意两个常用的属性：
a. rows 是指table中所有行
b. cells 是指table中的所有单元格（列）
c. 如果想要访问i行j列值：rows[i].cells[j]

4.DOM遍历，由于IE不支持相关的DOM Level Module，所以就不在这里多说了，但是虽然javascript受到浏览器限制，但java是可以完成这部分的功能

，见我的另一篇文章“DOM解析轻松入门（三）--DOM Level2 Modules”

5.测试和DOM标准的一致性
使用
var testDOM = document.implementation.hasFeature("XML","1.0")
该方法有两个参数：要检查的特征和特征的版本。(有关特征列表见“DOM解析轻松入门（三）--DOM Level2 Modules”)

/*
javascript与正则表达式 2008-2-26
*/

mynameisshine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript实现DOM（基础）

/*javascript实现DOM（基础）author:shine*/DOM是一种文档对象模型，它定义了操作xml文档的方法和属性，但是它只是一系列接口，是由别的语言来实现，如：java中xerces，javascript,.net等等，虽然实现方式各异，但有一样是不会变的，那就是DOM API，在正式进入我们的主题前，先来看看常用的DOM API（大致有个印象就行，后面会详解）：1.
复制链接

扫一扫