原生JavaScript操作——節(jié)點(diǎn)操作

進(jìn)入正題,開始學(xué)習(xí)JavaScript原生節(jié)點(diǎn)操作猜绣。

1.查找節(jié)點(diǎn)

獲取一般節(jié)點(diǎn)(當(dāng)然也可以獲取特殊關(guān)系節(jié)點(diǎn))

按id查找

document.getElementByID('patty');

按class名查找

document.getElementsByClassName('patty');

按標(biāo)簽名查找

document.getElementsByTagName('patty');

統(tǒng)一查找

document.querySelector('#id');
document.querySelectorAll('#id div');

獲取特殊關(guān)系節(jié)點(diǎn)

獲取父節(jié)點(diǎn)

document.getElementByID('patty').parentNode;

獲取元素子節(jié)點(diǎn)
/*childNodes會(huì)返回指定元素的所有種類節(jié)點(diǎn)
  children只返回指定元素的元素節(jié)點(diǎn)轧简,ie下包括注釋節(jié)點(diǎn)
*/
var getChildNodes=function(ele){
    var childArr=ele.children || ele.childNodes;
    children=new Array();
    for(var i=0;i<childArr.length;i++){
      if(childArr[i].nodeType==1){
          children.push(childArr[i]);
      }
   }
};
獲取上一個(gè)兄弟節(jié)點(diǎn)
/*nextSibling,previousSibling都會(huì)將空格或者換行當(dāng)做節(jié)點(diǎn)處理
   nextElementSibling,priviousElementSibling 直接返回元素節(jié)點(diǎn)
*/
function getPreviousElementSibling(ele) {    
     if(ele.previousElementSibling) {    
        return ele.previousElementSibling;    
     } else {    
           do {     
           ele= ele.previousSibling;     
            } while ( ele && ele.nodeType !== 1 );       
          return ele;    
  }   
}  ;   
getPreviousElementSibling(document.getElementById('patty'));
獲取下一個(gè)兄弟節(jié)點(diǎn)與獲取上一個(gè)兄弟節(jié)點(diǎn)類似

getNextElementSibling(ele)

獲取第一個(gè)和最后一個(gè)兄弟節(jié)點(diǎn)
/*firstChild,lastChild都會(huì)將空格或者換行當(dāng)做節(jié)點(diǎn)處理
   firstElementChild,lastElementChild 直接返回元素節(jié)點(diǎn)
  這里只列舉第一個(gè)孩子
*/
 function getFirstElementChild(ele) {    
     if(ele.firstElementChild) {    
        return ele.firstElementChild;    
     } else {    
           do {     
           ele=getNextElementSibling(ele) ;     
            } while ( ele && ele.nodeType !== 1 );       
          return ele;    
  }   
}  久又;

2.插入節(jié)點(diǎn)

JS提供appendChild(),insertBefore()兩個(gè)方法插入節(jié)點(diǎn)

插入新的子節(jié)點(diǎn)
var span = document.createElement('span');
document.querySelector('div').appendChild(span);
在指定節(jié)點(diǎn)前插入子節(jié)點(diǎn)
var patty = document.getElementById('patty');
var span = document.createElement('span');
patty.parentNode.insertBefore(span, patty);

/*更簡(jiǎn)單的*/
patty.insertAdjacentHTML('beforeBegin', '<span></span>');
在指定節(jié)點(diǎn)后插入子節(jié)點(diǎn)
function insertAfter(ele, newNode){
    if(ele.nextElementSibling) {
        ele.parentNode.insertBefore(newNode, ele.nextElementSibling);
     } else {
       ele.parentNode.appendChild(newNode);
    }
}
var patty = document.getElementById('patty');
var span = document.createElement('span');
insertAfter(patty, span);

/*更簡(jiǎn)單的*/
patty.insertAdjacentHTML('afterEnd', '<span></span>');

3.刪除節(jié)點(diǎn)

JS只提供removeChild()刪除節(jié)點(diǎn)

var  patty= document.getElementById('patty');
patty.parentNode.removeChild(patty);

4.清空節(jié)點(diǎn)

var  patty= document.getElementById('patty');
patty.innerHTML=' ';

5.判斷節(jié)點(diǎn)是否存在

document.getElementById('patty')!==null;
document.querySelectorAll(''div).length>0;

6.遍歷節(jié)點(diǎn)

/*IE的數(shù)組類型沒(méi)有forEach函數(shù)
  array.forEach(function(currentValue, index, arr), thisValue)
*/
function forEach(elems, callback) {
     if([].forEach) {
        [].forEach.call(elems, callback);
     } else {
        for(var i = 0; i < elems.length; i++) {
        callback(elems[i], i);   }
      }
}

var div = document.querySelectorAll('div');
forEach(div, function(elem, i){

});

7.復(fù)制節(jié)點(diǎn)

document.getElementById('patty').cloneNode(true);

8.獲壬访!/設(shè)置節(jié)點(diǎn)的內(nèi)容

獲取/設(shè)置節(jié)點(diǎn)內(nèi)的內(nèi)容

/*獲取*/
 document.querySelecotr('div').innerHTML
 var  div= document.querySelector('div');
 div.textContent  || div.innerText;
/*設(shè)置*/
 document.querySelecotr('div').innerHTML = '<span>abc</span>';
 document.querySelecotr('div').textContent = 'abc'

獲绒痔摺/設(shè)置包含節(jié)點(diǎn)本身的內(nèi)容

/*獲取*/
document.getElementById('patty').outerHTML
/*設(shè)置*/
document.getElementById('patty').outerHTML="<div>pattyzzh</div>";

獲冉烹埂/設(shè)置表單的內(nèi)容

/*獲取*/
document.querySelector('input').value;
/*設(shè)置*/
document.querySelector('input').value="pattyzzh";

9.屬性操作

判斷是否設(shè)置屬性

document.getElementById('pattyzzh').hasAttribute('class');

獲取屬性

document.getElementById('pattyzzh').getAttribute('class');

刪除屬性

document.getElementById('pattyzzh').removeAttribute('class');

設(shè)置屬性

document.getElementById('pattyzzh').setAttribute('class',‘patty’);

10.CSS樣式操作

/*設(shè)置樣式*/
document.getElementById('pattyzzh').style.color = '#e4e4e4';
/*獲取樣式
萬(wàn)惡的ie只支持currentStyle
*/
var getStyle = function(dom, attr) {   
     return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];  
   };

getStyle(document.getElementById('pattyzzh'), 'color');
/*獲取偽類的樣式(ie不支持)*/
window.getComputedStyle(el , ":after")[attrName];

11.Class操作

新增類

function addClass(elem, className) {
       if(elem.classList) {
         elem.classList.add(className);
       } else {
       elem.className += ' ' + className;
     }
}

addClass(document.getElementById('test'), 'a');

刪除類

function removeClass(ele, className) {
    if(ele.classList) {
       ele.classList.remove(className);
      } else {
      ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
     }
}
removeClass(document.getElementById('pattyzzh'), 'patty');

判斷是否包含類

function hasClass(ele, className) {
  if(ele.classList) {
    return ele.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(ele.className);

  }
}
hasClass(document.getElementById('pattyzzh'), 'patty');

12.字符串操作

/*去除空格*/
function trim(str){
     if(str.trim) {
       return str.trim();
      } else {
       return str.replace(/^\s+|\s+$/g, '');
  }
}
trim(' pattyzzh ');

/*JSON序列化*/
JSON.stringify({name: "pattyzzh"})

/*JSON反序列化*/
JSON.parse('{ "name": "pattyzzh" }')

好了巢墅,第一部分先寫這么多诸狭,下次見!君纫!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末驯遇,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子蓄髓,更是在濱河造成了極大的恐慌叉庐,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件会喝,死亡現(xiàn)場(chǎng)離奇詭異陡叠,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)肢执,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門枉阵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人预茄,你說(shuō)我怎么就攤上這事兴溜。” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵拙徽,是天一觀的道長(zhǎng)刨沦。 經(jīng)常有香客問(wèn)我,道長(zhǎng)膘怕,這世上最難降的妖魔是什么想诅? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮岛心,結(jié)果婚禮上侧蘸,老公的妹妹穿的比我還像新娘。我一直安慰自己鹉梨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布穿稳。 她就那樣靜靜地躺著存皂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逢艘。 梳的紋絲不亂的頭發(fā)上旦袋,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音它改,去河邊找鬼疤孕。 笑死,一個(gè)胖子當(dāng)著我的面吹牛央拖,可吹牛的內(nèi)容都是我干的祭阀。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼鲜戒,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼专控!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起遏餐,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤伦腐,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后失都,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體柏蘑,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年粹庞,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了咳焚。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡信粮,死狀恐怖黔攒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤督惰,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布不傅,位于F島的核電站,受9級(jí)特大地震影響赏胚,放射性物質(zhì)發(fā)生泄漏访娶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一觉阅、第九天 我趴在偏房一處隱蔽的房頂上張望崖疤。 院中可真熱鬧,春花似錦典勇、人聲如沸劫哼。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)权烧。三九已至,卻和暖如春伤溉,著一層夾襖步出監(jiān)牢的瞬間般码,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工乱顾, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留板祝,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓走净,卻偏偏與公主長(zhǎng)得像券时,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子温技,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 一革为、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu)),知道了CSS樣式(也稱為表示)舵鳞,會(huì)使用HT...
    凜0_0閱讀 2,755評(píng)論 0 8
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理震檩,服務(wù)發(fā)現(xiàn),斷路器蜓堕,智...
    卡卡羅2017閱讀 134,633評(píng)論 18 139
  • 我們首先要明白抛虏,我們給頁(yè)面添加效果用到的js到底是什么?js其實(shí)包含三部分:dom 文檔對(duì)象模型 bom 瀏覽...
    一直以來(lái)都很好閱讀 796評(píng)論 0 0
  • 【原文】 子曰:“飯疏食飲水套才,曲肱而枕之迂猴,樂(lè)亦在其中矣。不義而富且貴背伴,于我如浮云沸毁》逅瑁” 【注釋】 (1)飯疏食,飯息尺,...
    小綠植物閱讀 852評(píng)論 0 0
  • 今天的晨讀材料《博弈心理學(xué)》非常有意思携兵,介紹了三個(gè)我完全不知道的心理學(xué)概念。好像很虛無(wú)的概念搂誉,當(dāng)遇上生活瑣碎徐紧,變得...
    貓小開閱讀 637評(píng)論 0 49