DOM可以将任何HTML/XML文档秒回成一个由多层节点构成的结构。节点分为几种不同的类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,另外也与其他节点存在某种关系。节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构
上面那段话将DOM的结构
DOM操作的思维导图:http://naotu.baidu.com/file/2ad06e81a33a0c5e7621411e36c18a50
使用原生js插入元素到页面中的方法
-
使用字符串的方式进行拼接
注意: 该方法容易被别人利用,有注入挟持风险,因为无法检测到插入的是js脚本还是单纯的html标签。
var html = '';
html += '<div> 我是一个div</div>'
document.body.innerHTML= html;
当别人在html变量中插入<script>alert('你完蛋了');</script>
时,该js脚本会立马被执行,假如插入的是其他一些有攻击性的脚本,我们也无法检测出来,因此尽量不要使用这种方法,主要是由于.innerHTML
方法导致的
- 使用创建节点的方式来插入元素
也就是通过document.createElement('div')
类似于这种方法,该方法不会出现注入挟持的风险
使用js更改标签元素内容的方法
-
el.textContent = '内容'
textContent
方法是h5新增的方法 -
el.innerText = '内容'
innerText
方法最先由IE使用,后来被其他主流浏览器所支持,但是其并未被添加入标准 -
el.innerHTML = '内容'
innerHTML
方法与innerText
方法不同,该方法有危险,有可能出现注入挟持的风险,因为可以插入js脚本,尽量不要使用