回味JS（八）关于DOM

2021-09-10

DOM的节点类型有哪几种？

Document
DocumentType，即doctype标签（比如）
Element
Attribute，属性
Text
Comment，注释
DocumentFragment，文档片段

【回味JS（八）关于DOM】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方法对大于号和小于号进行转义，所以像这样的脚本会被转义一遍，既不执行避免了js注入攻击，又可以用来展示用户的输入
不过createTextNode不对单引号和双引号转义，所以不能用来对 HTML 属性赋值。

关于dataset属性？网页元素可以自定义data-属性，用来添加数据
如：

// 添加数据var div = document.getElementById('test'); div.dataset.columns === 5; // true

注意：如果在data-之后的属性名称中有连词线，且后面跟了一个英文字母，那么连词线会取消，该字母变成大写，如data-abc-def对应dataset.abcDef，但如果是其他字符则不变。

推荐阅读

上一篇：人生如戏，你演好自己的角色了吗（）

下一篇：Linux中gif的制作和图片转换