class
="wraper"
>
class
="one"
>
老大>
ppppp
>
div>
class
="box"
>
>
內容span
>
href
="#"
>
鏈結a>
>
段落p>
>
llp>
div>
class
="last"
>
老弟div
>
div>
//查
// 所有節點屬性都是元素物件下的屬性
// 使用節點：第一步獲取元素物件，再獲取節點
var box = document.
getelementsbyclassname
('box')[
0]; console.
dir(box)
;// nodename 表示當前節點的名字
var boxnode = box.nodename;
console.
log(boxnode)
;// 返回當前元素的父節點
var boxparent = box.parentnode;
console.
log(boxparent,
'---------------');
// 返回當前元素的父元素
var boxparentel = box.parentelement;
console.
log(boxparentel,
'**********====');
// 返回當前元素的子元素節點集合，不包括文字節點和屬性節點。
var boxchildren = box.children;
console.
log(boxchildren)
;// 獲取子元素物件
var fd = boxchildren[0]
; console.
log(fd)
;// childnodes會返回當前元素的子元素節點，屬性節點，文字節點。
var childnodes = box.childnodes;
console.
log(childnodes,
'---------------------');
// 用法如下：
var ch = childnodes[0]
.nextelementsibling;
console.
log(ch,
'++++++++++++++++');
// 返回當前元素的上乙個節點
var pre = box.previoussibling;
console.
log(pre)
;// 返回當前元素的上乙個相鄰兄弟元素物件
var preel = box.previouselementsibling;
console.
log(preel)
;// 返回當前元素的下乙個節點
var next = box.nextsibling;
console.
log(next)
;// 返回當前元素的下乙個相鄰兄弟元素物件
var nextel = box.nextelementsibling;
console.
log(nextel)
;// 返回當前元素的第乙個子節點
var first = box.firstchild;
console.
log(first)
;// 返回當前元素的第乙個子元素
var firstel = box.firstelementchild
console.
log(firstel)
;// 返回當前元素的最後乙個子節點
var lastch = box.lastchild;
console.
log(lastch)
;// 返回當前元素的最後乙個子元素
var lastel = box.lastelementchild;
console.
log(lastel)
;//增
var div = document.
createelement
('div');
box.
(div)
;// 刪
box.
removechild
(box.lastelementchild)
;// 改
var h1 = document.
createelement
('h1');
var a = document.
getelementsbytagname
('a')[
0]; box.
replacechild
(h1,a)
;// 轉殖
var last = document.
getelementsbyclassname
('last')[
0];var clone1 = last.
clonenode
(true);
//true 表示轉殖 el 以及el子節點
console.
log(clone1)
;var clone2 = last.
clonenode
(false);
//false 只轉殖el 不轉殖子節點
console.
log(clone2)
;
JS DOM基本操作
如下表 方法描述 getelementbyid 返回帶有指定 id 的元素。getelementsbytagname 返回包含帶有指定標籤名稱的所有元素的節點列表 集合 節點陣列 getelementsbyclassname 返回包含帶有指定類名的所有元素的節點列表。把新的子節點新增到指定節點。re...
js Dom的基本操作
window.pagexoffset window.pageyoffset ie8和ie8以下不相容 乙個有用 另乙個一定為0 document.body.scrollleft top body document.documentelement.scorllleft top html doucmen...
js DOM模型操作
dom模型中的節點 元素節點 文字節點 屬性節點 例 私 dotnet小屋 1 a是元素節點 2 私 dotnet小屋 是文字節點 3 href 是屬性節點 dom節點的屬性 nodename string 節點名稱，根據節點的型別而定義 nodevalue string 節點的值，根據節點的型別而...