前端開發(fā)知識(shí)點(diǎn)之javascript

mochixuan 發(fā)布于2019-08-21 17:07 / 2978人閱讀

摘要：節(jié)點(diǎn)有一個(gè)屬性用來表示當(dāng)前元素的類型，它是一個(gè)整數(shù)，元素，屬性，文本結(jié)構(gòu)兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。

DOM manipulation

DOM節(jié)點(diǎn)（Node）通常對(duì)應(yīng)于一個(gè)標(biāo)簽，一個(gè)文本，或者一個(gè)HTML屬性。DOM節(jié)點(diǎn)有一個(gè)nodeType屬性用來表示當(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)的，可以說比較通用。而另外兩個(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;
  }
}

云服務(wù)器 GPU云服務(wù)器前端開發(fā)基礎(chǔ)知識(shí) javascript前端開發(fā) javascript知識(shí)點(diǎn) 前端知識(shí)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89149.html

相關(guān)文章

Deep in JS - 收藏集 - 掘金

摘要：今天同學(xué)去面試，做了兩道面試題全部做錯(cuò)了，發(fā)過來給道典型的面試題前端掘金在界中，開發(fā)人員的需求量一直居高不下。排序算法 -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha） - 前端 - 掘金來自《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》，by 阮一峰目錄冒泡排序簡(jiǎn)介算法實(shí)現(xiàn) 選擇排序簡(jiǎn)介算法實(shí)現(xiàn) ... 圖例詳解那道 setTimeout 與循環(huán)閉包的經(jīng)典面...

enali 2019-08-20 16:36 評(píng)論0 收藏0
2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個(gè)人博客已上線，歡迎前去訪問評(píng)論無媛無故的個(gè)人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補(bǔ)充。一道面試題引發(fā)的對(duì) javascript 類型轉(zhuǎn)換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實(shí)現(xiàn)一個(gè)函數(shù)，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移...

王晗 2019-08-29 12:30 評(píng)論0 收藏0
2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個(gè)人博客已上線，歡迎前去訪問評(píng)論無媛無故的個(gè)人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補(bǔ)充。一道面試題引發(fā)的對(duì) javascript 類型轉(zhuǎn)換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實(shí)現(xiàn)一個(gè)函數(shù)，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移...

xiaochao 2019-08-22 11:03 評(píng)論0 收藏0
2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

摘要：最近遇到的前端面試題更新版前端掘金個(gè)人博客已上線，歡迎前去訪問評(píng)論無媛無故的個(gè)人博客以下內(nèi)容非本人原創(chuàng)，是整理后覺得更容易理解的版本，歡迎補(bǔ)充。一道面試題引發(fā)的對(duì) javascript 類型轉(zhuǎn)換的思考 - 前端 - 掘金最近群里有人發(fā)了下面這題：實(shí)現(xiàn)一個(gè)函數(shù)，運(yùn)算結(jié)果可以滿足如下預(yù)期結(jié)果： ... 收集 JavaScript 各種疑難雜癥的問題集錦 - 前端 - 掘金從原博客遷移過來...

KitorinZero 2019-08-20 16:40 評(píng)論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標(biāo)題雙大前端工程師讀書清單，以付費(fèi)的形式發(fā)布在上。發(fā)布完本次預(yù)告后，捕捉到了一個(gè)友善的吐槽讀書清單也要收費(fèi)。這本書便從的異步編程講起，幫助我們?cè)O(shè)計(jì)快速響應(yīng)的網(wǎng)絡(luò)應(yīng)用，而非簡(jiǎn)單的頁(yè)面。本文最早為雙十一而作，原標(biāo)題雙 11 大前端工程師讀書清單，以付費(fèi)的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進(jìn)行了深入的交流，現(xiàn)免費(fèi)分享到這里，不足之處歡迎指教...

happen 2019-08-02 16:00 評(píng)論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標(biāo)題雙大前端工程師讀書清單，以付費(fèi)的形式發(fā)布在上。發(fā)布完本次預(yù)告后，捕捉到了一個(gè)友善的吐槽讀書清單也要收費(fèi)。這本書便從的異步編程講起，幫助我們?cè)O(shè)計(jì)快速響應(yīng)的網(wǎng)絡(luò)應(yīng)用，而非簡(jiǎn)單的頁(yè)面。本文最早為雙十一而作，原標(biāo)題雙 11 大前端工程師讀書清單，以付費(fèi)的形式發(fā)布在 GitChat 上。發(fā)布之后在讀者圈群聊中和讀者進(jìn)行了深入的交流，現(xiàn)免費(fèi)分享到這里，不足之處歡迎指教...

余學(xué)文 2019-08-22 11:14 評(píng)論0 收藏0