節點操作 DOM程式設計

2022-09-06 16:09:12 字數 3476 閱讀 1452

父子關係：

兄弟關係：

hello


var ulnode = document.getelementsbytagname("ul")[0];


console.log(ulnode.parentnode); //


console.log(ulnode.previouselementsibling); //null


console.log(ulnode.nextelementsibling); //hello


console.log(ulnode.firstelementchild); //first


console.log(ulnode.lastelementchild); //fourth
getelementbyid獲取文件中指定id的節點物件。getelementbyid只作用於document，返回唯一值。

var element = document.getelementbyid('id');
getelementsbytagname獲取指定標籤元素節點的集合。此介面可直接通過元素而獲取，不必直接作用於document之上。

var ul = document.getelementbyid('ul');


console.log(ul.getelementsbytagname('li')); // htmlcollection(4) [li, li, li, li]


console.log(document.getelementsbytagname('li')); // htmlcollection(4) [li, li, li, li]


// 取出第乙個li元素


console.log(document.getelementsbytagname('li')[0]); // first
getelementsbyclassname獲取指定元素中具有指定class的所有節點。多個class可的選擇可使用空格分隔，與順序無關。

var body = document.getelementsbytagname('body')[0];


console.log(body.getelementsbyclassname('li first')); // htmlcollection [li.li.first]


console.log(body.getelementsbyclassname('first li')); // htmlcollection [li.li.first]


console.log(document.getelementsbyclassname('li first')); // htmlcollection [li.li.first]


console.log(document.getelementsbyclassname('first li')); // htmlcollection [li.li.first]
queryselector / queryselectorall

var ul = document.getelementbyid('ul');


console.log(ul.queryselector('.aaa')); // first


console.log(ul.queryselectorall('.aaa')); // nodelist(2) [li.aaa, li.aaa]


console.log(document.queryselector('.aaa')); // first


console.log(document.queryselectorall('.aaa')); // nodelist(2) [li.aaa, li.aaa]


document.createelement('tagname')
document.createtextnode('text')
獲取或設定節點以及其後代節點的文字內容。

hello


var p = document.getelementsbytagname('p')[0];


console.log(p.textcontent); // hello


console.log(p.innertext); // hello
textcontent和innertext的作用是一樣的。

獲取或設定指定節點之中所有的html內容。

var elementshtml = element.innerhtml;
在指定的元素內追加乙個元素節點。

var drink = document.getelementbyid('drink');


var li = document.createelement('li');


li.innertext = '啤酒';


在指定元素的指定節點前插入指定的元素。


var tea = document.getelementbyid('tea');


var li = document.createelement('li');


li.innertext = '涼茶';


參考：
 
DOM程式設計 節點操作 一
瀏覽器讀取html檔案並解析後，可以生成頁面結構，那麼在結構生成之後還可不可以再修改這個結構呢，這就需要用到我們的dom節點操作 節點操作主要有以下內容 獲取節點 建立節點 修改節點 插入節點 刪除節點 innerhtml 兄弟關係 直接通過節點關係，可維護性差，所以我們通過介面獲取節點 前端div...


DOM節點操作
節點型別 nodetype nodename nodevalue 含義element node 1標籤名 eg div null 元素節點 attribute node 2特性名 eg class 特性值特性節點 text node 3 text 文字的內容 文字節點 cdata section n...


操作dom節點
取到節點物件可以，我們可以建立乙個節點後動態插入到dom節點樹中 html中 1 建立乙個文字節點 第一段第二段 第三段 js var div document getelementsbytagname div 0 var textnode document createtextnode 文字節點 ...