DOM 基础总结

DOM(Document Object Model)，最初是为XML设计。
节点属性

HTML标签成树形结构，在内存中以文档对象映射的形式存放：


    
        
        
    </head>
    <body>
    </body>
</html>
</code></pre> 
 <ul> 
  <li>Node：Element（元素），Text（文本），Document（html标签，html是document的子节点），Comment（注释）；</li> 
  <li>页面中的节点通过上面的构造函数创建出对象，提供一系列操作节点的API（DOM API）</li> 
  <li>其中Node也是派生自Object。</li> 
 </ul> 
 <h3>DOM API</h3> 
 <p>一般是以下单词相互组合：</p> 
 <pre><code>child / children / parent
node
first / last
next / previous
sibling / siblings
type
value / text / content
inner / outer
element
</code></pre> 
 <p>例如：</p> 
 <pre><code>childNodes           // 获取子节点包括标签和回车键（文本）
children             // 获取子标签
firstElementChild    // 第一个元素儿子
previousSibling      // 上一个兄弟节点
previousElementSibling    // 上一个元素兄弟节点
nodeName            // body节点名称（注意除了svg是小写以外别的标签都是大写）
nodeType            // 节点类型编号
textContent         // 获取元素的文本内容（包括<script>、<style>等）
innerHTML           // 修改HTML标签（不安全，比如用户注入<script>）
innerText           // 获取元素文本内容（不包括<script>、<style>等，不包括display:none的，由于受CSS影响，会触发重排：如通过innerText修改节点属性导子节点丢失）
'textContent' in document.head ? document.body.textContent: document.body.innerText
...
</code></pre> 
 <p>关于DOM API，学习<code>DocumentFragment优化</code></p> 
 <h2>节点方法</h2> 
 <p>如果一个属性是函数，那么这个属性也叫做方法（即函数属性），常用方法：</p> 
 <pre><code>appendChild()      // 添加子节点
cloneNode()        // 克隆节点，默认是浅拷贝（true为深拷贝）
contains()         // 是否包含系欸但
hasChildNodes()    // 是否有子节点
insertBefore()     // 在前面插入节点
isEqualNode()      // 是否相等节点（元素完全一样）
isSameNode()       // 是否相同节点，等价于“===”
removeChild()      // 移除子节点（在内存中，不出现在页面）
replaceChild()     // 替换子节点
normalize()        // 常规化（如合并两个孩子的文本内容）
...
</code></pre> 
 <h3>Document API</h3> 
 <p>属性</p> 
 <pre><code>body
characterSet
childElementCount
children
doctype
documentElement
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx        // 事件监听
origin
plugins
readyState
referrer
scripts
scrollingElement
styleSheets
title
visibilityState
</code></pre> 
 <p>方法</p> 
 <pre><code>close
createDocumentFragment
createElement
createTextNode
execCommand          // 执行交互命令（开发富文本编辑器）
exitFullscreen
getElementById
getElementsByClassName
getElementsByName
getElementsByTagName
getSelection
hasFocus
open
querySelector        // 选择器（jQuery）
querySelectorAll     // 选择器，返回伪数组（instance of Array）
registerElement
write
writeln
</code></pre> 
 <p>其中document.close在异步操作中很危险：</p> 
 <pre><code><script>
    document.write(1)
    document.write(2)
    setTimeout(() ={document.write(3)}, 1000)    
// 写入1、2后document已执行close
// 1s后重新执行open，write会覆盖之前写入的内容
</script>
</code></pre> 
 <h3>Element API</h3> 
 <p>...</p> 
 <h2>事件模型</h2> 
 <h3>绑定事件的方式</h3> 
 <pre><code><button id=X, onclick='print()'>A</button>
<!-- 或 -->
<button id=X, onclick='print.call()'>A</button>
<!-- onclick后面跟的是要执行的代码，不是js函数 -->

<script>
    X.onclick = print    // 指定函数（不是调用）
</script>
</code></pre> 
 <h3>事件监听队列</h3> 
 <pre><code><script>
   // 第二次定义onclick，会把第一次覆盖
    xxx.onclick = function({    
        concole.log('1')
    })
    xxx.onclick = function({    
        concole.log('2')
    })

    // 队列会按事件设置的顺序执行
    f1 = function(){      
        concole.log('ok')
        // xxx.removeEventListener('click', f1)    // 执行一次即从队列中移除，只能执行一次
    }
    xxx.addEventListener('click', f1)
</script>
</code></pre> 
 <h3>事件捕获和冒泡</h3> 
 <pre><code><div>
    <div id='grand'>
        <div id='parent'>
            <div id='son'>
            </div>
        </div>
    </div>
</div>

<script>
    grand.addEventListener('click', function f1(){
        console.log('grand')
    })
    parent.addEventListener('click', function f2(){
        console.log('parent')
    })
    son.addEventListener('click', function f3(){
        console.log('son')
    })
    // 1、点击son所在区域，parent和grand都会触发事件
    // 2、事件执行顺序默认为fn3，fn2，fn1（addEventListener的第三个参数默认为false，称为冒泡；设置true则逆序执行，称为捕获）
    // 3、如果同一个元素上既定义了捕获也定义了冒泡，则按定义的顺序执行（不会覆盖）
</script>
</code></pre> 
 <h3>点击别处关闭浮层</h3> 
 <p>html</p> 
 <pre><code><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title
    



    
    
        浮层
方法1：
方法2（使用jQuery）：
图解事件捕获和冒泡：
DOM 基础总结

节点属性

你可能感兴趣的:(DOM 基础总结)
