DOM manipulation

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

摘要：節(jié)點(diǎn)有一個(gè)屬性用來(lái)表示當(dāng)前元素的類型，它是一個(gè)整數(shù)，元素，屬性，文本結(jié)構(gòu)兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。但是和是符合標(biāo)準(zhǔn)的，可以說(shuō)比較通用。

DOM manipulation

DOM節(jié)點(diǎn)（Node）通常對(duì)應(yīng)于一個(gè)標(biāo)簽，一個(gè)文本，或者一個(gè)HTML屬性。DOM節(jié)點(diǎn)有一個(gè)nodeType屬性用來(lái)表示當(dāng)前元素的類型，它是一個(gè)整數(shù)：

Element，元素

Attribute，屬性

Text，文本

DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。

當(dāng)前對(duì)象為node

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

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

返回第一個(gè)子節(jié)點(diǎn)：node.firstChild

返回最后一個(gè)子節(jié)點(diǎn)： node.lastChild

返回同屬上一個(gè)子節(jié)點(diǎn)：node.nextSibling

返回同屬下一個(gè)子節(jié)點(diǎn)：node.previousSibling

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

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

// 添加、刪除子元素

ele.appendChild(el);

ele.removeChild(el);

// 替換子元素

ele.replaceChild(el1, el2);

// 插入子元素

parentElement.insertBefore(newElement, referenceElement);

//克隆元素

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

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

node.childNodes（包含文本節(jié)點(diǎn)及標(biāo)簽節(jié)點(diǎn)）,

node.children

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

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;
  }
}