JS獲取DOM節點

2021-09-29 03:15:13 字數 1735 閱讀 9523
父節點id為target，有兩個字節點，獲取target下所有字節點

const childrens = document.getelementbyid('target').getelementtagname('div');
得出的childrens是乙個陣列，陣列中的元素是target下的子節點。

childnodes返回的是子節點的集合，是乙個陣列形式。

const childrens = document.getelementbyid('target').childnodes;
同樣會返回乙個以子節點為元素的陣列

const childrens = document.getelementbyid('target').children;
const children = document.getelementbyid('target').firstelementchild;
const children = document.getelementbyid('target').lastchild;


const children = document.getelementbyid('target').lastelementchild;
獲取目標元素的直接父元素

const father = document.getelementbyid('target').parentnode;
獲取目標元素的直接父元素,和parentnode一樣。但是parentelement是ie標準

const father = document.getelementbyid('target').parentelement;
獲取目標元素的所有父節點，直接能夠獲取到所有父親節點， 這個對應的值是body下的所有節點資訊

const fathers = document.getelementbyid('target').offsetparent;
const brother1 = document.getelementbyid('children1').parentnode.children[1];
previoussibling會匹配字元，包括換行和空格，而不是節點。previouselementsibling則直接匹配節點。

const brother1 = document.getelementbyid("children2").previouselementsibling;


const brother2 = document.getelementbyid("children2").previoussibling;
同previoussibling和previouselementsibling，nextsibling和nextelementsibling也是類似的。

const brother1 = document.getelementbyid("children2").nextelementsibling;


var brother2 = document.getelementbyid("children2").nextsibling;

js獲取節點 dom操作

介面 nodetype常量 nodetype值 備註element node.element node 元素節點 text node.text node 文字節點 document node.document node document comment node.comment node 注釋的文字...

js獲取節點 dom操作

介面 nodetype常量 nodetype值 備註element node.element node 元素節點 text node.text node 文字節點 document node.document node document comment node.comment node 注釋的文字...

js獲取節點dom操作

介面 nodetype常量 nodetype值 備註element node.element node 元素節點 text node.text node 文字節點 document node.document node document comment node.comment node 注釋的文字...