為啥要使用節點操作
主要是根據節點之間的關系來更方便的獲取元素對象.
例如: 之前寫過的點擊計數示例, 前面的做法是使用 獲取兩個 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="dnrv3ppvb" class="grandfather"> ? ? ? ?<div id="dnrv3ppvb" class="father"> ? ? ? ? ? ?<div id="dnrv3ppvb" 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="dnrv3ppvb" class="grandfather"> ? ?<div id="dnrv3ppvb" class="father"> ? ? ? ?<div id="dnrv3ppvb" 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://www.dvspw.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="dnrv3ppvb" class="parent"> ? ?<div id="dnrv3ppvb" class="child1">11div> ? ?<div id="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" class="container"> ? ?<div id="dnrv3ppvb" class="todo"> ? ? ? ?<h3>未完成h3> ? ? ? ? ? ?div> ? ?<div id="dnrv3ppvb" class="done"> ? ? ? ?<h3>已完成h3> ? ?div>div><div id="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" 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="dnrv3ppvb" class="foot">
<div id="dnrv3ppvb" class="foot_main">
<div id="dnrv3ppvb" class="foot_main_a">
<a href="http://www.dvspw.com">網站首頁</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=9">關于我們</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=10">公司新聞</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=11">產品方案</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=12">用戶案例</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=13">售后服務</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=14">合作伙伴</a><span> | </span>
<a href="http://www.dvspw.com/index.php?m=content&c=index&a=lists&catid=30">人才招聘</a><span> | </span>
</div>
<div id="dnrv3ppvb" 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://www.dvspw.com/" title="欧美vvv">欧美vvv</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="f5lr7" class="pl_css_ganrao" style="display: none;"><progress id="f5lr7"><acronym id="f5lr7"></acronym></progress><pre id="f5lr7"><th id="f5lr7"></th></pre><listing id="f5lr7"></listing><acronym id="f5lr7"><pre id="f5lr7"></pre></acronym><p id="f5lr7"><dfn id="f5lr7"></dfn></p><dfn id="f5lr7"></dfn><meter id="f5lr7"></meter><sub id="f5lr7"><thead id="f5lr7"></thead></sub><i id="f5lr7"><nobr id="f5lr7"><small id="f5lr7"><meter id="f5lr7"></meter></small></nobr></i><style id="f5lr7"></style><label id="f5lr7"><nobr id="f5lr7"></nobr></label><pre id="f5lr7"><i id="f5lr7"><nobr id="f5lr7"><small id="f5lr7"></small></nobr></i></pre><acronym id="f5lr7"></acronym><listing id="f5lr7"></listing><ruby id="f5lr7"><thead id="f5lr7"></thead></ruby><pre id="f5lr7"><th id="f5lr7"><b id="f5lr7"><mark id="f5lr7"></mark></b></th></pre><video id="f5lr7"><em id="f5lr7"><meter id="f5lr7"><span id="f5lr7"></span></meter></em></video><pre id="f5lr7"></pre><optgroup id="f5lr7"><output id="f5lr7"><sub id="f5lr7"><thead id="f5lr7"></thead></sub></output></optgroup><u id="f5lr7"><mark id="f5lr7"></mark></u><strong id="f5lr7"></strong><optgroup id="f5lr7"></optgroup><strong id="f5lr7"><optgroup id="f5lr7"><track id="f5lr7"><thead id="f5lr7"></thead></track></optgroup></strong><label id="f5lr7"><strong id="f5lr7"><track id="f5lr7"><tt id="f5lr7"></tt></track></strong></label><p id="f5lr7"></p><dfn id="f5lr7"><b id="f5lr7"></b></dfn><nobr id="f5lr7"><small id="f5lr7"><meter id="f5lr7"><span id="f5lr7"></span></meter></small></nobr><em id="f5lr7"><meter id="f5lr7"><pre id="f5lr7"><i id="f5lr7"></i></pre></meter></em><menuitem id="f5lr7"><sub id="f5lr7"><thead id="f5lr7"><label id="f5lr7"></label></thead></sub></menuitem><output id="f5lr7"><sub id="f5lr7"><thead id="f5lr7"><dl id="f5lr7"></dl></thead></sub></output><form id="f5lr7"></form><tt id="f5lr7"><progress id="f5lr7"><acronym id="f5lr7"><legend id="f5lr7"></legend></acronym></progress></tt><thead id="f5lr7"><dl id="f5lr7"><pre id="f5lr7"><th id="f5lr7"></th></pre></dl></thead><ol id="f5lr7"><style id="f5lr7"></style></ol><b id="f5lr7"><mark id="f5lr7"></mark></b><form id="f5lr7"><p id="f5lr7"><var id="f5lr7"><form id="f5lr7"></form></var></p></form><th id="f5lr7"><b id="f5lr7"><mark id="f5lr7"><form id="f5lr7"></form></mark></b></th><sub id="f5lr7"><thead id="f5lr7"></thead></sub><em id="f5lr7"></em><progress id="f5lr7"><acronym id="f5lr7"></acronym></progress><nobr id="f5lr7"><small id="f5lr7"><menuitem id="f5lr7"><pre id="f5lr7"></pre></menuitem></small></nobr><sub id="f5lr7"><strike id="f5lr7"></strike></sub><i id="f5lr7"><listing id="f5lr7"></listing></i><pre id="f5lr7"><th id="f5lr7"><tt id="f5lr7"><progress id="f5lr7"></progress></tt></th></pre><th id="f5lr7"></th><sub id="f5lr7"><strike id="f5lr7"></strike></sub><label id="f5lr7"></label><sub id="f5lr7"><strike id="f5lr7"></strike></sub><nobr id="f5lr7"></nobr><dfn id="f5lr7"></dfn><span id="f5lr7"><strike id="f5lr7"></strike></span><mark id="f5lr7"><form id="f5lr7"><p id="f5lr7"><var id="f5lr7"></var></p></form></mark><pre id="f5lr7"><i id="f5lr7"><listing id="f5lr7"><dfn id="f5lr7"></dfn></listing></i></pre><i id="f5lr7"><listing id="f5lr7"><dfn id="f5lr7"><output id="f5lr7"></output></dfn></listing></i><span id="f5lr7"><i id="f5lr7"><strong id="f5lr7"><dfn id="f5lr7"></dfn></strong></i></span><span id="f5lr7"><strike id="f5lr7"><listing id="f5lr7"><dfn id="f5lr7"></dfn></listing></strike></span><font id="f5lr7"></font><font id="f5lr7"><legend id="f5lr7"></legend></font><pre id="f5lr7"><dfn id="f5lr7"><b id="f5lr7"><ins id="f5lr7"></ins></b></dfn></pre><dfn id="f5lr7"><b id="f5lr7"></b></dfn><small id="f5lr7"></small><video id="f5lr7"><font id="f5lr7"></font></video><ol id="f5lr7"></ol><tt id="f5lr7"><progress id="f5lr7"><acronym id="f5lr7"><pre id="f5lr7"></pre></acronym></progress></tt><form id="f5lr7"><ins id="f5lr7"><address id="f5lr7"><div id="f5lr7"></div></address></ins></form><dl id="f5lr7"><pre id="f5lr7"></pre></dl><address id="f5lr7"><legend id="f5lr7"></legend></address><form id="f5lr7"></form><small id="f5lr7"><menuitem id="f5lr7"><pre id="f5lr7"><i id="f5lr7"></i></pre></menuitem></small><pre id="f5lr7"><i id="f5lr7"></i></pre><sup id="f5lr7"><label id="f5lr7"><video id="f5lr7"><em id="f5lr7"></em></video></label></sup><ins id="f5lr7"></ins><listing id="f5lr7"><dfn id="f5lr7"></dfn></listing><address id="f5lr7"><p id="f5lr7"></p></address><p id="f5lr7"><var id="f5lr7"></var></p><progress id="f5lr7"><acronym id="f5lr7"><p id="f5lr7"><var id="f5lr7"></var></p></acronym></progress><strong id="f5lr7"><th id="f5lr7"></th></strong><em id="f5lr7"><meter id="f5lr7"></meter></em><progress id="f5lr7"></progress><track id="f5lr7"><b id="f5lr7"><progress id="f5lr7"><acronym id="f5lr7"></acronym></progress></b></track><video id="f5lr7"><font id="f5lr7"><meter id="f5lr7"><pre id="f5lr7"></pre></meter></font></video><style id="f5lr7"><nobr id="f5lr7"></nobr></style><label id="f5lr7"><nobr id="f5lr7"></nobr></label><dfn id="f5lr7"><output id="f5lr7"><sub id="f5lr7"><thead id="f5lr7"></thead></sub></output></dfn><form id="f5lr7"></form><strong id="f5lr7"><track id="f5lr7"></track></strong><mark id="f5lr7"></mark><optgroup id="f5lr7"></optgroup><var id="f5lr7"><form id="f5lr7"><rp id="f5lr7"><font id="f5lr7"></font></rp></form></var><strike id="f5lr7"></strike><sub id="f5lr7"></sub><font id="f5lr7"><legend id="f5lr7"><ol id="f5lr7"><style id="f5lr7"></style></ol></legend></font><thead id="f5lr7"><thead id="f5lr7"><label id="f5lr7"><strong id="f5lr7"></strong></label></thead></thead><meter id="f5lr7"><pre id="f5lr7"></pre></meter><p id="f5lr7"><var id="f5lr7"></var></p><th id="f5lr7"><tt id="f5lr7"><mark id="f5lr7"><form id="f5lr7"></form></mark></tt></th><acronym id="f5lr7"></acronym><legend id="f5lr7"><th id="f5lr7"><b id="f5lr7"><mark id="f5lr7"></mark></b></th></legend><nobr id="f5lr7"><em id="f5lr7"><meter id="f5lr7"><pre id="f5lr7"></pre></meter></em></nobr><progress id="f5lr7"><acronym id="f5lr7"></acronym></progress><p id="f5lr7"><ol id="f5lr7"></ol></p><label id="f5lr7"></label><em id="f5lr7"></em><strong id="f5lr7"></strong><menuitem id="f5lr7"><pre id="f5lr7"><strike id="f5lr7"><strong id="f5lr7"></strong></strike></pre></menuitem><address id="f5lr7"></address><sup id="f5lr7"><form id="f5lr7"></form></sup><mark id="f5lr7"><acronym id="f5lr7"><legend id="f5lr7"><dfn id="f5lr7"></dfn></legend></acronym></mark><sup id="f5lr7"><label id="f5lr7"></label></sup><b id="f5lr7"></b><listing id="f5lr7"><dfn id="f5lr7"></dfn></listing><strike id="f5lr7"><listing id="f5lr7"></listing></strike><var id="f5lr7"><form id="f5lr7"><rp id="f5lr7"><font id="f5lr7"></font></rp></form></var><style id="f5lr7"><video id="f5lr7"><em id="f5lr7"><div id="f5lr7"></div></em></video></style><em id="f5lr7"></em><strike id="f5lr7"></strike><b id="f5lr7"><ins id="f5lr7"></ins></b><var id="f5lr7"><form id="f5lr7"><rp id="f5lr7"><font id="f5lr7"></font></rp></form></var><address id="f5lr7"><legend id="f5lr7"></legend></address><rp id="f5lr7"></rp><optgroup id="f5lr7"></optgroup><track id="f5lr7"><tt id="f5lr7"><big id="f5lr7"><acronym id="f5lr7"></acronym></big></tt></track><progress id="f5lr7"><acronym id="f5lr7"><pre id="f5lr7"><th id="f5lr7"></th></pre></acronym></progress><track id="f5lr7"><b id="f5lr7"><mark id="f5lr7"><form id="f5lr7"></form></mark></b></track><form id="f5lr7"></form><dfn id="f5lr7"></dfn><tt id="f5lr7"><ins id="f5lr7"></ins></tt><strong id="f5lr7"></strong><p id="f5lr7"><var id="f5lr7"></var></p><div id="f5lr7"></div><pre id="f5lr7"><i id="f5lr7"><listing id="f5lr7"><dfn id="f5lr7"></dfn></listing></i></pre><form id="f5lr7"><legend id="f5lr7"><dfn id="f5lr7"><u id="f5lr7"></u></dfn></legend></form><strong id="f5lr7"><optgroup id="f5lr7"></optgroup></strong><menuitem id="f5lr7"></menuitem><nobr id="f5lr7"><small id="f5lr7"><menuitem id="f5lr7"><span id="f5lr7"></span></menuitem></small></nobr><rp id="f5lr7"></rp><dfn id="f5lr7"><b id="f5lr7"></b></dfn><listing id="f5lr7"><optgroup id="f5lr7"></optgroup></listing><acronym id="f5lr7"><p id="f5lr7"><dfn id="f5lr7"><form id="f5lr7"></form></dfn></p></acronym><pre id="f5lr7"><i id="f5lr7"><listing id="f5lr7"><dfn id="f5lr7"></dfn></listing></i></pre><ruby id="f5lr7"></ruby><output id="f5lr7"></output><pre id="f5lr7"><i id="f5lr7"><listing id="f5lr7"><optgroup id="f5lr7"></optgroup></listing></i></pre><strike id="f5lr7"><listing id="f5lr7"></listing></strike><pre id="f5lr7"><track id="f5lr7"></track></pre><small id="f5lr7"><output id="f5lr7"></output></small><acronym id="f5lr7"><pre id="f5lr7"><th id="f5lr7"><u id="f5lr7"></u></th></pre></acronym><listing id="f5lr7"></listing><th id="f5lr7"></th><form id="f5lr7"><p id="f5lr7"><var id="f5lr7"><u id="f5lr7"></u></var></p></form></div>
</html>