JavaScript学习笔记之DOM

浏览器：

• 从IE10开始支持ES6
• Chrome支持ES6，自升级
• Safari 6.1版本后支持
• FireFox支持ES6，自升级

浏览器对象：

• window：全局作用域，浏览器窗口
• navigator：表示浏览器信息
• screen：表示屏幕的信息
• location：表示当前页面的URL信息
• document：表示当前页面，整个DOM树的根节点。cookie属性，设置httpOnly不能被javascript读取
  getElementById() getElementsByTag()
• history：保存了浏览器的历史记录，back() forward()

操作DOM：html文档被解析后是一棵DOM树

• 更新：更新DOM节点的内容，相当于更新了该DOM节点表示的html的内容
• 遍历：遍历子节点
• 添加：新增子节点
• 删除：删除节点及子节点

获取DOM节点：

• document.getElementById() ID在html文档中是唯一的
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()

更新DOM：

• 修改innerHTML属性，可修改文本和子树
• 修改innerText或textContent，自动编码，不设置标签
• 修改css样式 p.style.color="#ff0000"

插入DOM：

var p = createElement("p");
p.id = "p1";
p.innerText = "段落";
list.append(p);
list.insertBefore(newElement, referenceElement);

删除DOM：

调用父节点的removeChild()。self.parentElement;