DOM manipulation

Tonny 發(fā)布于2019-08-21 17:04 / 1632人閱讀

摘要：節(jié)點有一個屬性用來表示當前元素的類型，它是一個整數(shù)，元素，屬性，文本結構兩個節(jié)點之間可能存在哪些關系以及如何在節(jié)點之間任意移動。但是和是符合標準的，可以說比較通用。

DOM manipulation

DOM節(jié)點（Node）通常對應于一個標簽，一個文本，或者一個HTML屬性。DOM節(jié)點有一個nodeType屬性用來表示當前元素的類型，它是一個整數(shù)：

Element，元素

Attribute，屬性

Text，文本

DOM結構 —— 兩個節(jié)點之間可能存在哪些關系以及如何在節(jié)點之間任意移動。

當前對象為node

返回父節(jié)點：node.parentNode, node.parendElement,

返回所有子節(jié)點：node.childNodes（包含文本節(jié)點及標簽節(jié)點）,node.children

返回第一個子節(jié)點：node.firstChild

返回最后一個子節(jié)點： node.lastChild

返回同屬上一個子節(jié)點：node.nextSibling

返回同屬下一個子節(jié)點：node.previousSibling

parentNode和parentElement功能一樣，childNodes和children功能一樣。但是parentNode和childNodes是符合W3C標準的，可以說比較通用。而另外兩個只是IE支持，不是標準，F(xiàn)irefox就不支持 ,所以大家只要記得有parentElement和children就行了
移位 -> http://www.cnblogs.com/QingFl...

DOM操作 ——如何添加、移除、移動、復制、創(chuàng)建和查找節(jié)點等。

// 添加、刪除子元素

ele.appendChild(el);

ele.removeChild(el);

// 替換子元素

ele.replaceChild(el1, el2);

// 插入子元素

parentElement.insertBefore(newElement, referenceElement);

//克隆元素

ele.cloneNode(true) //該參數(shù)指示被復制的節(jié)點是否包括原節(jié)點的所有屬性和子節(jié)點

childNodes vs children 返回所有子節(jié)點：

node.childNodes（包含文本節(jié)點及標簽節(jié)點）,

node.children

Element.children returns only element children(元素節(jié)點), while Node.childNodes returns all node children. Note that elements are nodes, so both are available on elements.（node節(jié)點包括element 節(jié)點）

getElementsByClassName(H5) compatible version

function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(classname);
  } else {
    var results = new Array();
    var elems = node.getElementsByTagName("*");
    for (var i = 0; i < elems.length; i++) {
      if (elems[i].className.indexOf(classname) != -1) {
        result.push(elems[i]);
      }
    }
    return results;
  }
}

云服務器 GPU云服務器 manipulation bit-manipulation DOM dom0和dom2

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89102.html

Licia：最全最實用的 JavaScript 工具庫

摘要：為了避免不同項目之間進行復制粘貼，可以將這些常用的函數(shù)封裝到一起并發(fā)布包。目前所包含模塊已達三百個，基本可以滿足前端的日常工發(fā)需求。二使用打包工具該項目自帶打包工具，可以通過配置文件或命令行掃描源碼自動生成項目專用的工具庫。前言在業(yè)務開發(fā)過程中，我們經(jīng)常會重復使用日期格式化、cookie 操作、模板、瀏覽器判斷、類型判斷等功能。為了避免不同項目之間進行復制粘貼，可以將這些常用的函數(shù)...

luxixing 2019-08-22 17:00 評論0 收藏0
Awesome JavaScript

摘要： Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...

endless_road 2019-08-22 10:56 評論0 收藏0
VueJS源碼學習——元素在插入和移出 dom 時的過渡邏輯

摘要：原文地址項目地址關于中使用效果，官網(wǎng)上的解釋如下當元素插入到樹或者從樹中移除的時候，屬性提供變換的效果，可以使用來定義變化效果，也可以使用來定義首先第一個函數(shù)是將元素插入，函數(shù)實現(xiàn)調用了實現(xiàn)代碼如下寫的好的代碼就是文檔，從注釋和命名上就 src/transition 原文地址項目地址關于 vue 中使用 transition 效果，官網(wǎng)上的解釋如下： With Vue.js’ tra...

Dogee 2019-08-21 16:18 評論0 收藏0
Ajax局部頁面刷新和History API結合的陷阱

摘要：對于那些老網(wǎng)站或者老項目來說全盤改造成并不現(xiàn)實，于是就有了局部頁面刷新這個解決方案。如果不知道局部頁面刷新是何物請看這里，這里和這里。但實際上，第一次后退無法還原的內容陷阱，第二次后退頁面刷新了一切恢復最初的樣子。 ajax在現(xiàn)代網(wǎng)站已經(jīng)得到非常普遍地應用，主要的好處大家都知道（異步加載數(shù)據(jù)，不用刷新整個瀏覽器，更小的數(shù)據(jù)傳輸尺寸）。對于那些老網(wǎng)站或者老項目來說全盤改造成ajax并不現(xiàn)...

JasinYip 2019-08-20 10:14 評論0 收藏0
FastClick 源碼解讀

摘要：所有瀏覽器瀏覽器不支持安卓中中有屬性安卓中中有屬性有屬性的有屬性的所以在不需要的瀏覽器會直接掉，不會執(zhí)行下面的所有代碼。見源碼行，可以看出在響應無操作后，則觸發(fā)。其實一直就想花些時間讀一讀那些優(yōu)秀的開源庫，今天終于下了決定打算死磕下自己，2016年每個月讀2-3個優(yōu)秀的開源庫，把源碼精彩的地方和自己心得分享給大家。目錄（一）背景（二）源碼解析（三）Zepto 點擊穿透與 Fast...

Chaz 2019-08-19 17:24 評論0 收藏0