前端

HTML DOM 和 XML DOM 操作

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

获取元素的属性值

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

一个例子

基础模版如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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对象上。