探索解析HTMLDOM元素的秘密（二）

探索解析HTMLDOM元素的秘密

• 上一篇文章提供了一个简单的函数来解析html并生成DOM元素
• 但是这个函数很复杂，而且有很多漏洞和不足，这一次就提供一个近乎完美的函数来解析html
• 我们都知道，在DOM提供的API中，有一个属性值得注意：就是 innerHTML属性，这个属性之所以神奇就是他可以解析html，这次就利用这个属性来实现更好的解析html的函数

话不多说，直接上代码：

if(!document.beHTMLDOM){
    document.beHTMLDOM = function(container,domstr){
        const element = document.createElement("div")
        element.innerHTML = domstr
        const dom = element.childNodes[0]
        container.appendChild(dom)
        return dom
    }
}

• 进行简单的测试：

const domdemo1 = "<h2 id='title' style='color:red'>Hello World</h2>"
// document.beHTMLDOM(document.body,domdemo1)
console.log(document.beHTMLDOM(document.body,domdemo1))

• 这个函数有一个注意点：就是如果你想显示多个标签，建议使用div标签来包裹，像这样

const domdemo1 = "<div><h2 id='title' style='color:red'>Hello World</h2><p style='font-style:italic'>你是不是傻？</p></div>"
// document.beHTMLDOM(document.body,domdemo1)
console.log(document.beHTMLDOM(document.body,domdemo1))

• 这个函数可以说已经是很完美了