怎样用原生 JavaScript 把字符串解析为 DOM 对象

JavaScript014

怎样用原生 JavaScript 把字符串解析为 DOM 对象,第1张

首先,你的问题太模糊,不好理解。最好举个例子,把什么样的字符串解析成DOM对象?

如果是要把HTML文本字符串转换成DOM对象。

下面的这个函数就可以:

function parseToDOM(str){

   var div = document.createElement("div")

   if(typeof str == "string")

       div.innerHTML = str

   return div.childNodes

}

参数:

       str : HTML文本字符串.

返回值:

        所需要的DOM对象,以Array形式返回(事实上是近似Array的Node List).

用法:

       var nodelist = parseToDOM("<b>hello world</b>")

DOM 的全称是" Document Object Model ",中文意思为“文档对象模型”。

就像 JS 中所有的对象都继承自 Object 一样,浏览器提供一个原生的节点对象 Node (Node 是一个函数), DOM 的所有节点都继承自 Node ,Node 又继承自 Object,因此它们具有一些共同的属性和方法。

一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。

顶层的 根节点 html 属于 Document 节点,代表整个文档;

第二层级和第三层级的属于 Element 节点,即网页的各种 HTML 标签;

第四层级的属于 Text 节点,即标签之间或标签包含的文本。

页面中的节点,通过上述不同的构造函数,构造出相应的对象。

由此可以看出 DOM 的主要作用 :DOM 是 JavaScript 操作网页的接口,它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(如增删改查)。

DOM 有自己的国际标准,目前通用版本是 DOM 3。

Node 属性有很多,用到时可以查询文档。

如果一个属性是函数,那么这个属性也叫做 方法 ;即方法是函数属性。

document对象是文档的根节点,window.document属性就指向这个对象。

通过 DOM API 获取到的 elements 都是伪数组。

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个 Element 节点对象。

DOM 提供两种节点集合,用于容纳多个节点: NodeList 和 HTMLCollection 。这两种集合都属于接口规范。许多 DOM 属性和方法,返回的结果是 NodeList 实例或 HTMLCollection 实例。

节点对象除了继承 Node 接口以外,还会继承其他接口。

try{

if (window.ActiveXObject !== undefined){//兼容IE,注意IE11不能再用window.ActiveXObject或者document.all判断

var xmlDoc= new ActiveXObject("Microsoft.XMLDOM")

xmlDoc.async = "false"

xmlDoc.load("topology.xml")

}else if(document.implementation&&document.implementation.createDocument){//兼容火狐

try{

var xmlDoc = document.implementation.createDocument('', '', null)

xmlDoc.async = false

xmlDoc.load("topology.xml")

} catch(e){

var xmlhttp = new window.XMLHttpRequest()

xmlhttp.open("GET","topology.xml",false)

xmlhttp.send(null)

xmlDoc = xmlhttp.responseXML

}

}else{

alert("load data error")

}

}catch(e){

alert(e.message)

}