回味JS（八）关于DOM
2019-07-06 本文已影响0人
ArmorVon
DOM的节点类型有哪几种？
- Document
- DocumentType，即doctype标签（比如<!DOCTYPE html>）
- Element
- Attribute，属性
- Text
- Comment， 注释
- DocumentFragment， 文档片段
PS： 这七种节点都继承了原生的节点对象Node
如何获取document对象？
- 正常的网页，直接使用document或window.document。
- iframe框架里面的网页，使用iframe节点的contentDocument属性。
- Ajax 操作返回的文档，使用XMLHttpRequest对象的responseXML属性。
- 内部节点的ownerDocument属性。
为什么能用document.domain来跨域？
- document.domain属性返回当前文档的域名，不包含协议和接口
- 次级域名的网页，可以把document.domain设为对应的上级域名，修改后，document.domain相同的两个网页，可以读取对方的资源，比如设置的 Cookie。
appendChild和innerHTML有什么区别？
- appendChild是每次插入的内容都成为该元素的最后一个子元素。（插入）
- innerHTML是整个重写该元素内的所有HTML代码，也就是说之前写的那些都会被覆盖。（覆盖）
优缺点：
- 从性能上说，innerHTML效率要高一些，因为直接解析字符串比创建html节点对象再生成html节点要快。
- 但使用inner HTML的话，如果你在原来的子元素上绑定了事件的话，重写后事件绑定仍然还在； 而且js代码和html代码耦合程度高，不利于维护
为什么可以通过createTextNode来防止XSS攻击？
- document.createTextNode方法用来生成文本节点，这个节点，被浏览器当作文本渲染，而不是当作 HTML 代码渲染。
- createTextNode方法对大于号和小于号进行转义，所以像<script>这样的脚本会被转义一遍，既不执行避免了js注入攻击，又可以用来展示用户的输入
- 不过createTextNode不对单引号和双引号转义，所以不能用来对 HTML 属性赋值。
关于dataset属性？
网页元素可以自定义data-属性，用来添加数据
如：
// 添加数据
<div id="test" data-columns=5></div>
var div = document.getElementById('test');
div.dataset.columns === 5; // true
注意： 如果在data-之后的属性名称中有连词线，且后面跟了一个英文字母，那么连词线会取消，该字母变成大写，如data-abc-def对应dataset.abcDef，但如果是其他字符则不变。
