DOM,函数原型,元素节点

DOM:通过浏览器提供的这一套方法表示或者操作HTML和XML
HTML/XML
XML --> XHTML --> HTML

遍历元素节点数
parentElement IE9及以下不支持
children IE7及以下不支持
childElementCount = children.length IE9及以下不支持
firstElementChild lastElementChild IE9及以下不支持
nextElementSibiling previousElementSibing IE9及以下不支持
nodeName --> 元素节点的nodeName 大写只读
nodeValue 可写属性、注释、文本可用
nodeType 只读

document 构造函数 HTMLDocument
HTMLDocument 构造函数 Document
HTMLDocument 构造出来的对象里面有__proto__:Document.prototype
function HMLDocument(){…}
HTMLDocument.prototype = {…}
HTMLDocument.prototype.proto = Document.prototype
var document = new HTMLDocument();

DOM操作深入
   1.getElementById()
   Document.prototype
   Element.prototype HTMLElement.prototype没有

   2.getElementByName
   Document.prototype
   Element.prototype  没有

   3.getElementByTagName
   getElementByClassName
   querySelector querySelectorAll
   Document.prototype
   Element.prototype

HTMLDocument.prototype --> body head
Document.prototype --> documentElement --> HTML
// appendChild 增加子节点
// Node.prototype

//c.insertBefore(a,b);
//插入：在父级c节点下的子节点b之前插入a节点

DOM对象 = 元素节点
节点：
元素文本注释属性 document documentFragment
元素 --> 元素节点
nodeName nodeValue nodeType attributes hasChildNodes
元素 -->构造函数实例化 --> div节点
div new HTMLDivElement() removeChild(div);
–> div DOM对象删除了节点
存到了内存当中

function getElementsByTagName(element){
1.从HTML中把P元素选择出来
2.new HTMLParagraphElement() -->
DOM节点、DOM元素
}

innerHTML innerText
innerHTML --> Element.prototype
HTMLElement.prototype

//parent.replaceChild(new,origin)

innerText 火狐 firefox textContent --> IE的老版本

document.createDocumentFragment()
创建文档片段（碎片）

查看滚动条的距离
常规： window.pageXOffset/pageYOffset
IE9/IE8及以下：
document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop
不常见： window.scrollX/scrollY

浏览器的怪异模式和标准模式
BackCompat CSS1Compat

浏览器可视区域的尺寸（窗口的宽高）
常规：window.innerWidth/innerHeight
IE9/IE8及以下：
标准：document.body.clientWidth/clientHeight
怪异：document.body.clientWidth/clientHeight
window.outerWidth window.outerHeight
document.documentElement.scrollWidth
document.documentElement.scrollHeight
document.body.scrollWidth
document.body.scrollHeight

事件流：描述从页面中接受事件的顺序冒泡捕获
IE 提出的事件冒泡流(Event Bubbling)
Netascape 提出的事件捕获流(Event Capturing)

事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段
DOM0 onclick onXXX onmouseover onmouseout
onclick = “”
elem.onclick = function(){}

    DOM1 没有 定义事件模型
    DOM2 addEventListener(3个参数) -》 W3C规范
        removeEventListener

Event对象 = new MouseEvent();

target srcElement -> 事件源对象

target srcElement -> 事件源对象
FF只有这个target
IE只有srcElement

DOM,函数原型,元素节点

猜你喜欢