跳到主要内容

HTML DOM 和 XML DOM 操作

· 阅读需 3 分钟

今天看到一篇文章，突然发现自己之前对 DOM 操作有很大的误解。

获取元素的属性值​

对于页面的 DOM 元素，一般获取其 id class dataset 都有 HTML DOM 的获取方法，但是在我面试的时候，几乎所有的面试者都给出了让我意外的结果，那就是通过 XML DOM 的 getAttribute 方法来进行获取。

一个例子​

基础模版如下：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
<input type="text" id="input0" class="input-box" value="hello world!" data-view="abc">

<script>
  var input = document.querySelector('#input0')
</script>
</body>
</html>

首先测试 class：

console.log('HTML - class before:', input.className)
console.log('XML - class before:', input.getAttribute('class'))
input.classList.add('red')
input.className += ' blue'
var className = input.getAttribute('class')
input.setAttribute('class', className + ' green')
console.log('HTML - class after:', input.className)
console.log('XML - class after:', input.getAttribute('class'))


// result
// HTML - class before: input-box
// XML - class before: input-box
// HTML - class after: input-box red blue green
// XML - class after: input-box red blue green

可以说，对于 class 不管用 HTML 还是 XML 的 DOM 方法，获取结果都是一致的。

我们再测试下 value：

console.log('HTML - value before:', input.value)
console.log('XML - value before:', input.getAttribute('value'))
input.value += '123'
console.log('HTML - value after:', input.value)
console.log('XML - value after:', input.getAttribute('value'))
//  input.addEventListener('input', function () {
//    console.log('HTML - value after:', input.value)
//    console.log('XML - value after:', input.getAttribute('value'))
//  })

// result
// HTML - value before: hello world!
// XML - value before: hello world!
// HTML - value after: hello world!123
// XML - value after: hello world!

不论是通过 JS 改变还是页面编辑触发，都会导致两者获得的值不同。其中 XML-DOM 方法获取的永远是原始值。

其他属性，也可以进行测试，大部分情况下两者还是相同的。

出现这种现象，我认为主要是 操作是否在HTML上进行响应。在操作 class 时，HTML 发生了改变。而 value 这个属性，不会随之改变。

所以，常规的 dataset id checked 属性两种方案都可以正常获取。

但是如果我们对 DOM 增加属性，如 input.aaa = 111，此时数据仅仅记录在 DOM 对象上，并没有反馈到 HTML 节点，所以 getAttribute 就无法获取。

小结​

对于本次例子整体来说，HTML-DOM 是对象级别操作，可以对对象进行读取修改增加等，并不是所有的操作都需要反馈到 XML-DOM节点上。

而XML-DOM是对XML节点（HTML 字符串）的读取和写入操作，其中写入操作必定还会反馈到HTML-DOM对象上。