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 基础总结)