js總結 （6） DOM操作 節點元素 遍歷樹

dom，主要用來修改html的標準程式設計介面，可以用來修改各種html標籤內容 和屬性 樣式。

查詢：document： 整個文件。

document.getelementsbytagname

document.getelementbyid

document.getelementsbyclassname

遍歷節點：

var div=document.getelementsbyclassname('con')[0];

div.parentnode-> 父節點  (最頂端的parentnode為#document);

遍歷元素：

div.children 遍歷所有的子元素（孫子就不算）這就是乙個物件，可以.length屬性

獲取節點型別：div.firstelementchild.nodetype

.......................總結............................

節點                   元素節點

div.parentnode;      div.parentelement;

.childnodes                 .children

.firstchild;                    .firstelementchild;

.lastchild;                     .lastelementchild;

.nextsibling;                .nextelementsibling;

.previoussibling          .prevelementsibling;

節點的型別

元素節點 —— 1

屬性節點 —— 2

文字節點 —— 3

注釋節點 —— 8

document —— 9

documentfragment —— 11

獲取節點型別 nodetype

習題

1. 封裝函式，返回元素e的第n層祖先元素

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

function retparent(elem,n) 
return elem;
} retparent(strong,4);

1. 這個方法只能查到 兒子節點

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

var arr=;
arr.push(div.children);

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

var child = div.firstchild;
while(child != div.lastchild)
child = child.nextsibling;
}

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

var child = div.firstelementchild;     //這是返回第乙個元素節點  next就是下乙個 孫子也可以返回
while(child)

var s=div.firstelementchild;

for (var i = 0 ; i 
<
div.children.length; i++) 

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

function retsibling(e,n) else
}return e;
}  

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

var p=document.getelementsbytagname('p')[0];
var div=document.getelementsbytagname('div')[0];
element.prototype.insertafter = function(targetnode,originnode) else
};

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

var div=document.getelementsbytagname('div')[0];
function reverse(a) 
}

JS知識整理隨筆（6） DOM

語法 ele.stylename stylevalue 功能 設定ele元素的css樣式 說明困了 困了 不刷了 下次見dom 語法 ele.getattribute attribute 功能 獲取ele元素的attribute屬性 說明 語法 ele.setattribute attribute ...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...

js操作dom節點

1.訪問節點 document.getelementbyid id 返回對擁有指定id的第乙個物件進行訪問 document.getelementsbyname name 返回帶有指定名稱的節點集合 注意 elements document.getelementsbytagname tagname ...