為啥要使用節點操作
主要是根據節點之間的關系來更方便的獲取元素對象.
例如: 之前寫過的點擊計數示例, 前面的做法是使用 獲取兩個 input 標簽, 再進行操作.
但是兩個 input 標簽其實是兄弟關系, 咱們可以借助節點操作, 更方便的獲取到 input 的元素對象.
?<script> ? ?var text = document.querySelector('#text'); ? ?var btn = document.querySelector('#btn'); ? ?btn.onclick = function () { ? ? ? ?var num = +text.value; ? ? ? ?console.log(num); ? ? ? ?num++; ? ? ? ?text.value = num; ? }script>核心關系: 父子, 兄弟.
頁面中的一切內容都是節點
文本, 元素, 屬性等都是節點.
每個節點對象主要有三個屬性:
?div><script> ? ?var div = document.querySelector('.box'); ? ?console.dir(div);script>
獲取父節點
體會 HTML 中的父子關系
? ? ? ? ? ? ?父子關系title>head><body> ? ?<div id="ueq20ce" class="grandfather"> ? ? ? ?<div id="ueq20ce" class="father"> ? ? ? ? ? ?<div id="ueq20ce" class="son">div> ? ? ? ?div> ? ?div>body>html></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>在這個 html 中:</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>使用 屬性獲取到該節點的父節點.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="grandfather"> ? ?<div id="ueq20ce" class="father"> ? ? ? ?<div id="ueq20ce" class="son">div> ? ?div>div><script> ? ?var son = document.querySelector('.son'); ? ?console.log(son); ? ?console.log(son.parentNode); ? ?console.log(son.parentNode.parentNode);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>獲取所有子節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>1) 使用 屬性獲取到該節點的子節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<ul> ? ?<li>1li> ? ?<li>2li> ? ?<li>3li>ul><script> ? ?var ul = document.querySelector('ul'); ? ?console.log(ul.childNodes);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意! 結果是 類型, 得到的是 "節點", 而不是 "元素" (節點的范圍比元素更廣)</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>第一個 li 和 ul 之間存在換行.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>最后一個 li 和 ul 之間存在換行.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>li 和 li 之間也存在換行.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>這些換行也都是節點(文本節點).</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>如果想只獲取元素節點, 可以手動寫個函數, 把 type 為 1 的節點保留下來.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="<a style='color:#0000CC;' href='http://m.dszhyy.com/show-19-37269-1.html' title="js 選擇元素做表單驗證 PDF中的條件驗證" target='_blank'>js</a>">?function getElementNode(nodeList) { ? ?var result = []; ? ?for (var i = 0; i < nodeList.length; i++) { ? ? ? ?if (nodeList[i].nodeType == 1) { ? ? ? ? ? ?result.push(nodeList[i]); ? ? ? } ? } ? ?return result;}console.log(getElementNode(ul.childNodes));</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>當然, 這樣做比較麻煩.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>2) 使用 屬性獲取子節點中的元素節點(非標準, 但是各個瀏覽器都支持)</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<ul> ? ?<li>1li> ? ?<li>2li> ? ?<li>3li>ul><script> ? ?var ul = document.querySelector('ul'); ? ?console.log(ul.children);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'> 屬性得到的是一個 , 只包含元素對象.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>獲取第一個節點/最后一個節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<ul> ? ?<li>1li> ? ?<li>2li> ? ?<li>3li> ? ?<li>4li>ul><script> ? ?var ul = document.querySelector('ul'); ? ?console.log(ul.firstChild); ? ?console.log(ul.lastChild); ? ?console.log(ul.firstElementChild); ? ?console.log(ul.lastElementChild);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>實際開發更常用的辦法是直接借助 得到子元素數組, 然后通過下標來操作.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?ul.children[0]; ? ? ? ? ? ? // 第一個節點ul.children[ul.length - 1]; // 最后一個節點</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>獲取兄弟節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="parent"> ? ?<div id="ueq20ce" class="child1">11div> ? ?<div id="ueq20ce" class="child2">22div>div><script> ? ?var child1 = document.querySelector('.child1'); ? ?console.log(child1.nextSibling); ? ?console.log(child1.previousSibling); ? ?console.log(child1.nextElementSibling); ? ?console.log(child1.previousElementSibling);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'> 單詞本意就是 兄；弟；姐；妹;</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>新增節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>分成兩個步驟</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>創建元素節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>把元素節點插入到 dom 樹中.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>第一步相當于生了個娃, 第二步相當于給娃上戶口.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>1. 創建元素節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>使用 方法來創建一個元素. 參數暫不關注.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?var element = document.createElement(tagName[, options]);</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>代碼示例:</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container">div><script> ? ?var div = document.createElement('div'); ? ?div.id = 'mydiv'; ? ?div.className = 'box'; div.innerHTML = 'hehe'; ? ?console.log(div);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>此時發現, 雖然創建出新的 div 了, 但是 div 并沒有顯示在頁面上. 這是因為新創建的節點并沒有加入到 DOM 樹中.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>上面介紹的只是創建元素節點, 還可以使用:</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>我們以 為主即可.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>2. 插入節點到 dom 樹中</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>1) 使用 將節點插入到指定節點的最后一個孩子之后</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?element.appendChild(aChild)</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container">div><script> ? ?var div = document.createElement('div'); ? ?div.id = 'mydiv'; ? ?div.className = 'box'; ? ?div.innerHTML = 'hehe'; ? ?var container = document.querySelector('.container'); ? ?container.appendChild(div);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>2) 使用 將節點插入到指定節點之前.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?var insertedNode = parentNode.insertBefore(newNode, referenceNode);</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>如果 為 null 則 將被插入到子節點的末尾.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意: 引用節點不是可選參數.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container"> ? ?<div>11div> ? ?<div>22div> ? ?<div>33div> ? ?<div>44div>div><script> ? ?var newDiv = document.createElement('div'); ? ?newDiv.innerHTML = '我是新的節點'; ? ?var container = document.querySelector('.container'); ? ?console.log(container.children); ? ?container.insertBefore(newDiv, container.children[0]);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意1: 如果針對一個節點插入兩次, 則只有最后一次生效(相當于把元素移動了)</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container"> ? ?<div>11div> ? ?<div>22div> ? ?<div>33div> ? ?<div>44div>div><script> ? ?var newDiv = document.createElement('div'); ? ?newDiv.innerHTML = '我是新的節點'; ? ?var container = document.querySelector('.container'); ? ?console.log(container.children); ? ?// 此處的 children 里有 4 個元素 ? ?container.insertBefore(newDiv, container.children[0]); ? ?// 此處的 children 里有 5 個元素(上面新插了一個), 0 號元素是 新節點, ? ?// 1 號元素是 11, 2號節點是 22, 所以是插入到 22 之前. ? ?container.insertBefore(newDiv, container.children[2]);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意2: 一旦一個節點插入完畢, 再針對剛剛的節點對象進行修改, 能夠同步影響到 DOM 樹中的內容.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container"> ? ?<div>11div> ? ?<div>22div> ? ?<div>33div> ? ?<div>44div>div><script> ? ?var newDiv = document.createElement('div'); ? ?newDiv.innerHTML = '我是新的節點'; ? ?var container = document.querySelector('.container'); ? ?console.log(container.children); ? ?container.insertBefore(newDiv, container.children[0]); ? ? ? ?// 插入完畢后再次修改 newDiv 的內容 ? ?newDiv.innerHTML = '我是新節點2';script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>代碼示例: 待辦事項</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>功能:</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>界面上包含一個輸入框和新增任務按鈕. 點擊新增則把輸入框中的任務加入到任務列表中.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>任務列表中顯示當前待辦的所有任務.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>每個任務前面包含一個復選框, 勾選則表示任務完成, 任務自動被放到另外一個已完成列表.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>a) 頁面布局</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container"> ? ?<div id="ueq20ce" class="todo"> ? ? ? ?<h3>未完成h3> ? ? ? ? ? ?div> ? ?<div id="ueq20ce" class="done"> ? ? ? ?<h3>已完成h3> ? ?div>div><div id="ueq20ce" class="footer"> ? ?<input type="text"> ? ?<button>新建任務button>div></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>b) 頁面樣式</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="css">?* { ? ?margin: 0; ? ?padding: 0; ? ?box-sizing: border-box;}body,html { ? ?height: 100%;}body,html,input,button { ? ?font-size: 20px; ? ?line-height: 50px;}body { ? ?background-color: #f3f3f3;}.container { ? ?width: 800px; ? ?height: 100%; ? ?margin: 0 auto; ? ?background-color: #fff;}.todo,.done { ? ?float: left; ? ?width: 50%; ? ?height: 100%; ? ?overflow: auto;}.container h3 { ? ?height: 50px; ? ?text-align: center; ? ?font-weight: 400; ? ?background-color: #333; ? ?color: #fff;}.container .todo h3 { ? ?border-right: 1px solid #fff;}.footer { ? ?width: 800px; ? ?height: 50px; ? ?position: absolute; ? ?bottom: 0; ? ?/* 水平居中 */ ? ?left: 50%; ? ?margin-left: -400px;}.footer input { ? ?float: left; ? ?width: 600px; ? ?height: 50px; ? ?outline: none;}.footer button { ? ?float: left; ? ?width: 200px; ? ?height: 50px; ? ?border: none; ? ?background-color: skyblue; ? ?color: #fff;}</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>c) 實現新增任務</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?// 實現新增任務var addTaskButton = document.querySelector('.footer>button');addTaskButton.onclick = function () { ? ?// 1. 獲取到任務內容的輸入框 ? ?var input = document.querySelector('.footer>input'); ? ?// 2. 獲取到輸入框內容 ? ?var taskContent = input.value; ? ?// 3. 根據內容新建一個元素節點 ? ?var row = document.createElement('div'); ? ?row.className = 'row'; ? ?var checkbox = document.createElement('input'); ? ?checkbox.type = 'checkbox'; ? ?var space = document.createTextNode(' '); // 需要創建一個文本節點, 表示空格 ? ?var span = document.createElement('span'); ? ?span.innerHTML = taskContent; ? ?row.appendChild(checkbox); ? ?row.appendChild(space); ? ?row.appendChild(span); ? ?// 4. 把新節點插入到 todo 中 ? ?var todo = document.querySelector('.todo'); ? ?todo.appendChild(row);}</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>d) 實現完成任務</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>把復選框勾選中的元素移動到已完成部分.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>在 . 中設置 的點擊事件.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意, 這個代碼必須放到 . 的回調函數內部.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?// 給 checkbox 注冊點擊事件checkbox.onclick = function () { ? ?var row = this.parentNode; ? ?// 注意! 是先觸發 checked 為 true, 然后再調用 onclick 函數 ? ?if (this.checked) { ? ? ? ?var target = document.querySelector('.done'); ? } else { ? ? ? ?var target = document.querySelector('.todo'); ? } ? ?target.appendChild(row);}</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意:</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>目前我們學習了兩種創建節點的方式:</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>這兩種方式都很常用.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>還有一種方式為 .write</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>這種方式會導致整個頁面全部重繪(頁面原有內容丟失). 只在特定場景下才會使用.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>刪除節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>使用 刪除子節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?oldChild = element.removeChild(child);</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>代碼示例: 待辦事項2</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>在上面的案例中, 新增刪除任務功能</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>給每一個任務中增加刪除按鈕</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="row"> ? ?<input type="checkbox"> ? ?<span>吃飯span> ? ?<button>刪除button>div></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>設置按鈕樣式</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="css">?.row { ? ?/* 受行高影響, row 的實際高度并不是 50px, 需要顯式設定 */ ? ?height: 50px;}.row button { ? ?/* 讓按鈕顯式在右側 */ ? ?float: right; ? ?padding: 0 10px; ? ?height: 50px;}</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>在新建任務時創建刪除按鈕</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?// addTaskButton.onclick = function () { 中var button = document.createElement('button');button.innerHTML = '刪除';...row.appendChild(button);</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注冊刪除事件</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?// 給刪除按鈕注冊點擊事件button.onclick = function () { ? ?var row = this.parentNode; ? ?var grandParent = row.parentNode; ? ?grandParent.removeChild(row);}</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>拷貝節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>使用 node.() 拷貝節點</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code lang="js">?var dupNode = node.cloneNode(deep);</code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意1: 在 DOM4 規范中(實現于Gecko 13.0( 13.0 / 13.0 / 2.10))，deep是一個可選參數。如果省略的話，參數的默認值為 true，也就是說默認是深度克隆。如果想使用淺克隆, 你需要將該參數設置為 false。</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>在最新的規范里，該方法的行為已經改變了，其默認值變成了 false。雖然該參數仍舊是可選的<strong>js取最后一個子節點</strong><strong>js取最后一個子節點</strong>，但是你必須要為該方法設置 deep 參數，無論是為了向前還是向后兼容考慮。假如開發者沒設置參數的話，Gecko 28.0 ( 28 / 28 / 2.25 / OS 1.3)) 版本的控制臺會發出警告。從 Gecko 29.0 ( 29 / 29 / 2.26)) 開始該方法默認為淺復制而不是深度復制。</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>注意2: 克隆一個元素節點會拷貝它所有的屬性以及屬性值,當然也就包括了屬性上綁定的事件(比如="alert(1)"),但不會拷貝那些使用()方法或者node. = fn這種用動態綁定的事件.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'><pre><code>?<div id="ueq20ce" class="container"> ? ?<button>我是一個按鈕button>div><script> ? ?var button = document.querySelector('button'); ? ?button.onclick = function () { ? ? ? ?alert('haha'); ? } ? ?// var newButton = button.cloneNode(); ? ?var newButton = button.cloneNode(true); ? ?var container = document.querySelector('.container'); ? ?container.appendChild(newButton);script></code></pre></p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>當 參數為空時, 復制的 不包含文本內容.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>當 參數為 true 的時候, 復制的 才包含文本內容.</p>
<p style='margin-bottom:16px;color:#555555;font-size:16px;line-height:200%;text-indent:2em;'>另外, 通過 方式注冊的點擊事件不會被拷貝.</p> </ul>
</div>
<!--分頁數
<div id="ueq20ce" class="page">
相關閱讀：<a target="_blank">js取最后一個子節點 jq獲取最后一個子節點_JavaScript(9) webapi操作節點</a></p>
<a target="_blank">2、繁體字轉換模塊，此處可以把你輸入的...</a>
</div>-->
</div>
</div>
</div>
</div>
</div>
<div style=" clear:both"></div>
<!--底部-->
<div id="ueq20ce" class="foot">
<div id="ueq20ce" class="foot_main">
<div id="ueq20ce" class="foot_main_a">
<a href="http://m.dszhyy.com">網站首頁</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=9">關于我們</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=10">公司新聞</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=11">產品方案</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=12">用戶案例</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=13">售后服務</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=14">合作伙伴</a><span> | </span>
<a href="http://m.dszhyy.com/index.php?m=content&c=index&a=lists&catid=30">人才招聘</a><span> | </span>
</div>
<div id="ueq20ce" class="foot_p">
<p>友情鏈接：
<a target="_blank">餐飲加盟</a>
</p>
<p>地址：北京市海淀區 電話：010- 郵箱：@126.com</p>
<p>備案號：<a ><span style="color:#999999;">冀ICP備2024067069號-3</span></a> 北京科技有限公司版權所有</p>
</div>
</div>
</div>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://m.dszhyy.com/" title="操屁眼的视频在线免费看">操屁眼的视频在线免费看</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="kcmg2" class="pl_css_ganrao" style="display: none;"><optgroup id="kcmg2"></optgroup><pre id="kcmg2"><del id="kcmg2"><dfn id="kcmg2"></dfn></del></pre><object id="kcmg2"></object><object id="kcmg2"></object><del id="kcmg2"></del><acronym id="kcmg2"></acronym><del id="kcmg2"><tfoot id="kcmg2"><source id="kcmg2"></source></tfoot></del><del id="kcmg2"></del><strike id="kcmg2"><input id="kcmg2"><tbody id="kcmg2"></tbody></input></strike><tbody id="kcmg2"><s id="kcmg2"><cite id="kcmg2"></cite></s></tbody><dl id="kcmg2"><object id="kcmg2"><li id="kcmg2"></li></object></dl><td id="kcmg2"></td><tr id="kcmg2"><s id="kcmg2"><small id="kcmg2"></small></s></tr><small id="kcmg2"><option id="kcmg2"><delect id="kcmg2"></delect></option></small><tfoot id="kcmg2"></tfoot><center id="kcmg2"></center><noframes id="kcmg2"></noframes><sup id="kcmg2"><source id="kcmg2"><strong id="kcmg2"></strong></source></sup><strong id="kcmg2"></strong><th id="kcmg2"></th><input id="kcmg2"></input><abbr id="kcmg2"></abbr><pre id="kcmg2"><blockquote id="kcmg2"><strike id="kcmg2"></strike></blockquote></pre><fieldset id="kcmg2"></fieldset><small id="kcmg2"><abbr id="kcmg2"><delect id="kcmg2"></delect></abbr></small><option id="kcmg2"></option><source id="kcmg2"><code id="kcmg2"><em id="kcmg2"></em></code></source><strike id="kcmg2"><menu id="kcmg2"><noscript id="kcmg2"></noscript></menu></strike><noscript id="kcmg2"></noscript><fieldset id="kcmg2"><menu id="kcmg2"><noscript id="kcmg2"></noscript></menu></fieldset><optgroup id="kcmg2"><abbr id="kcmg2"><center id="kcmg2"></center></abbr></optgroup><ul id="kcmg2"></ul><kbd id="kcmg2"></kbd><button id="kcmg2"></button><input id="kcmg2"></input><input id="kcmg2"></input><xmp id="kcmg2"></xmp><cite id="kcmg2"></cite><del id="kcmg2"></del><abbr id="kcmg2"></abbr><nav id="kcmg2"><li id="kcmg2"><button id="kcmg2"></button></li></nav><del id="kcmg2"></del><tr id="kcmg2"></tr><option id="kcmg2"></option><menu id="kcmg2"></menu><s id="kcmg2"><bdo id="kcmg2"><abbr id="kcmg2"></abbr></bdo></s><nav id="kcmg2"></nav><noscript id="kcmg2"></noscript><xmp id="kcmg2"><fieldset id="kcmg2"><menu id="kcmg2"></menu></fieldset></xmp><source id="kcmg2"><dl id="kcmg2"><optgroup id="kcmg2"></optgroup></dl></source><xmp id="kcmg2"></xmp><ul id="kcmg2"></ul><samp id="kcmg2"><tbody id="kcmg2"><s id="kcmg2"></s></tbody></samp><cite id="kcmg2"></cite><dl id="kcmg2"><object id="kcmg2"><li id="kcmg2"></li></object></dl><source id="kcmg2"></source><kbd id="kcmg2"><pre id="kcmg2"><wbr id="kcmg2"></wbr></pre></kbd><dl id="kcmg2"></dl><wbr id="kcmg2"><fieldset id="kcmg2"><table id="kcmg2"></table></fieldset></wbr><del id="kcmg2"></del><wbr id="kcmg2"><fieldset id="kcmg2"><table id="kcmg2"></table></fieldset></wbr><em id="kcmg2"></em><tr id="kcmg2"><pre id="kcmg2"><wbr id="kcmg2"></wbr></pre></tr><em id="kcmg2"></em><pre id="kcmg2"><xmp id="kcmg2"><fieldset id="kcmg2"></fieldset></xmp></pre><dd id="kcmg2"><dl id="kcmg2"><object id="kcmg2"></object></dl></dd><table id="kcmg2"></table><tr id="kcmg2"><td id="kcmg2"><cite id="kcmg2"></cite></td></tr><strong id="kcmg2"></strong><button id="kcmg2"><delect id="kcmg2"><tbody id="kcmg2"></tbody></delect></button><tbody id="kcmg2"><pre id="kcmg2"><del id="kcmg2"></del></pre></tbody><delect id="kcmg2"></delect><noscript id="kcmg2"><pre id="kcmg2"><blockquote id="kcmg2"></blockquote></pre></noscript><center id="kcmg2"><dd id="kcmg2"><tbody id="kcmg2"></tbody></dd></center><th id="kcmg2"><object id="kcmg2"><li id="kcmg2"></li></object></th><cite id="kcmg2"><table id="kcmg2"><tr id="kcmg2"></tr></table></cite><samp id="kcmg2"><th id="kcmg2"><s id="kcmg2"></s></th></samp><kbd id="kcmg2"></kbd><tr id="kcmg2"></tr><delect id="kcmg2"></delect><del id="kcmg2"></del><center id="kcmg2"></center><wbr id="kcmg2"><cite id="kcmg2"><table id="kcmg2"></table></cite></wbr><xmp id="kcmg2"></xmp><object id="kcmg2"></object><acronym id="kcmg2"></acronym><cite id="kcmg2"></cite><optgroup id="kcmg2"></optgroup><acronym id="kcmg2"></acronym><table id="kcmg2"></table><xmp id="kcmg2"><strike id="kcmg2"><input id="kcmg2"></input></strike></xmp><tbody id="kcmg2"><noframes id="kcmg2"><del id="kcmg2"></del></noframes></tbody><center id="kcmg2"></center><li id="kcmg2"></li><blockquote id="kcmg2"></blockquote><samp id="kcmg2"><tbody id="kcmg2"><object id="kcmg2"></object></tbody></samp><tr id="kcmg2"><pre id="kcmg2"><xmp id="kcmg2"></xmp></pre></tr><noscript id="kcmg2"></noscript><code id="kcmg2"></code><code id="kcmg2"><noframes id="kcmg2"><ul id="kcmg2"></ul></noframes></code><button id="kcmg2"></button><table id="kcmg2"><kbd id="kcmg2"><pre id="kcmg2"></pre></kbd></table><optgroup id="kcmg2"></optgroup><button id="kcmg2"><samp id="kcmg2"><tbody id="kcmg2"></tbody></samp></button><tbody id="kcmg2"></tbody><strike id="kcmg2"><menu id="kcmg2"><noscript id="kcmg2"></noscript></menu></strike><kbd id="kcmg2"></kbd><nav id="kcmg2"></nav><option id="kcmg2"><kbd id="kcmg2"><tr id="kcmg2"></tr></kbd></option><del id="kcmg2"></del><button id="kcmg2"><samp id="kcmg2"><th id="kcmg2"></th></samp></button><strike id="kcmg2"></strike><dfn id="kcmg2"><rt id="kcmg2"><code id="kcmg2"></code></rt></dfn><dl id="kcmg2"><optgroup id="kcmg2"><abbr id="kcmg2"></abbr></optgroup></dl><tbody id="kcmg2"></tbody><del id="kcmg2"></del><source id="kcmg2"></source><source id="kcmg2"><code id="kcmg2"><optgroup id="kcmg2"></optgroup></code></source><wbr id="kcmg2"><cite id="kcmg2"><table id="kcmg2"></table></cite></wbr><button id="kcmg2"></button><noframes id="kcmg2"></noframes><ul id="kcmg2"><dfn id="kcmg2"><source id="kcmg2"></source></dfn></ul><option id="kcmg2"><delect id="kcmg2"><tr id="kcmg2"></tr></delect></option><strike id="kcmg2"></strike><tr id="kcmg2"><pre id="kcmg2"><td id="kcmg2"></td></pre></tr><delect id="kcmg2"></delect><delect id="kcmg2"></delect><center id="kcmg2"></center><abbr id="kcmg2"></abbr><center id="kcmg2"></center><abbr id="kcmg2"></abbr><bdo id="kcmg2"><option id="kcmg2"><kbd id="kcmg2"></kbd></option></bdo><td id="kcmg2"></td><em id="kcmg2"><ul id="kcmg2"><dfn id="kcmg2"></dfn></ul></em><input id="kcmg2"></input><em id="kcmg2"></em><pre id="kcmg2"><wbr id="kcmg2"><fieldset id="kcmg2"></fieldset></wbr></pre><em id="kcmg2"></em><abbr id="kcmg2"></abbr><dd id="kcmg2"></dd><source id="kcmg2"></source><fieldset id="kcmg2"><menu id="kcmg2"><tr id="kcmg2"></tr></menu></fieldset><em id="kcmg2"><xmp id="kcmg2"><strike id="kcmg2"></strike></xmp></em><blockquote id="kcmg2"></blockquote><abbr id="kcmg2"></abbr><center id="kcmg2"></center><rt id="kcmg2"><code id="kcmg2"><em id="kcmg2"></em></code></rt><abbr id="kcmg2"></abbr><input id="kcmg2"></input><noscript id="kcmg2"></noscript></div>
</html>