javascript学习大纲知识点总结之三

10 BOM

• 10.1 window
  • 10.1.1 window是全局浏览器内置顶级对象。
  • 10.1.2 window属性可作为全局变量来使用。如window.document只写document。
  • 10.1.3 全局变量默认挂在window下。
  • 10.1.4 子对象：document、history、location、navigator、screen
  • 10.1.5 常用方法：setInterval()、setTimeout()、alert()、confirm()、prompt()
  • 10.1.6 事件：onload、onscroll、onresize
• 10.2 javascript包含DOM,BOM,ECMAScript！但BOM和DOM不是JS独有的！
• 10.3 window是BOM顶级对象，document是DOM的顶级对象！通俗点说BOM包含DOM！
• 10.4 JavaScript原生中默认是没有console对象，这是游览器提供的内置对象。

11 DOM

• 11.1 DOM树 node节点
  • 11.1.1 NodeType、nodeName、nodeValue
  • 11.1.2 innerHTML、innerText
  • 11.1.3 setAttribute、getAttribute
  • 11.1.4 文档碎片createDocumentFragment()避免多次插入，一次性插入
• 11.2 节点操作：
  • 11.2.1 获取：
  • 11.2.1.1 .getElementById()、.getElementsByTagName()、.getElementsByName( ) 、.getElementsByClassName()、.querySelector ()、.querySelectorAll ()
  • 11.2.1.2 .children、.parentNode、.previousSibling、.nextSibling、.childNodes、.firstChild、.lastChild、.firstElementChild、.lastElementChild、.parentNode
  • 11.2.2 创建：var oDiv = document.createElement(“div”);
  • 11.2.3 插入：parentNode.appendChild(childNode); parentNode.insertBefore(newNode, targetNode);
  • 11.2.4 替换：parentNode.replaceChild(newNode, targetNode);
  • 11.2.5 删除：parentNode.removeChild(childNode); node.parentNode.removeChild(node); childNode.remove() //IE不支持
  • 11.2.6 克隆：clonedNode = Node.cloneNode(boolean)// true深克隆，复制该节点下的所有子节点；false浅克隆，只复制该节点。
• 11.3 节点属性值操作：
  • 11.3.1 前缀必须是节点
  • 11.3.2 获取：.getAttribute()、oBox.attributes
  • 11.3.3 设置：.setAttribute()
  • 11.3.4 删除：.removeAttribute()
• 11.4 节点类型：
  • 11.4.1 nodeObj.nodeType
  • 11.4.2 1-元素节点 2-属性节点 3-文本节点 8-注释节点 9-document节点
• 11.5 innerHTML会将标签解析；nodeValue不会进行解析，会将标签名转译成字符串，直接输出
• 11.6 尺寸：
  • 11.6.1 box.style.width、box.style.height // 只能获取到内联style属性的CSS样式
  • 11.6.2 box.clientWidth、box.clientHeight // 返回元素px大小，无单位
  • 11.6.3 box.scrollWidth、box.scrollHeight
  • 11.6.4 box.offsetWidth、box.offsetHeight // 返回元素px大小，无单位
• 11.7 位置：
  • 11.7.1 box.clientLeft、box.clientTop
  • 11.7.2 box.offsetLeft、box.offsetTop
  • 11.7.3 box.scrollTop、box.scrollLeft