層級關係
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>層級關係
title
>
head
>
<
body
>
<
ul id
="ul"
>
<
li>青島理工
li>
<
li id
="li2"
class
="">山東科技
li>
<
li>清華大學
li>
ul>
body
>
<
script
>
/*parentnode:通過子元素獲取父元素
*/var
li2
=document.getelementbyid(
"li2");
varul
=li2.parentnode;
console.log(ul);
/*childnodes:通過父元素去查詢所有的子元素,
有bug，元素和元素之間不允許換行
*/var
ul =
document.getelementbyid("ul
");varlis
=ul.childnodes;
console.log(lis);
/*firstchild：通過父元素去查詢第乙個子元素
* 有bug，元素和元素之間不允許換行
* firstelementchild:通過父元素去查詢第乙個子元素，
* 允許元素換行
*/var
ul =
document.getelementbyid("ul
");//var li1 = ul.firstchild;
varli1
=ul.firstelementchild;
console.log(li1);
/*lastchild：通過父元素去查詢最後乙個子元素
* 有bug，元素和元素之間不允許換行
* lastelementchild:通過父元素去查詢最後乙個子元素，
* 允許元素換行
*/var
ul =
document.getelementbyid("ul
");//var li1 = ul.lastchild;
varli1
=ul.lastelementchild;
console.log(li1);
varli2
=document.getelementbyid(
"li2");
//var li1 = li2.previoussibling; /*獲取前乙個同級節點*/
varli1
=li2.previouselementsibling;
/*無bug
*///
var li3 = li2.nextsibling; /*獲取後乙個同級節點*/
varli3
=li2.nextelementsibling;
/*無bug
*/console.log(li1);
console.log(li3);
script
>
html
>
創造和增加節點
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>創造和增加節點
title
>
head
>
<
body
>
<
img
src="../../../img/f3_android1.png"
alt=""
id="oldimg"
>
<
button
onclick
="create()"
>新增
button
>
<
button
onclick
="clone()"
>複製
button
>
body
>
<
script
>
/*創造和增加節點
*/function
create()
function
clone()
script
>
html
>
作業練習
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>作業
title
>
head
>
<
body
>
<
ul id
="ul"
>
<
li id
="li1"
>列表項1
li>
<
li>列表項2
li>
<
li id
="li3"
>列表項3
li>
<
li>列表項4
li>
<
li>列表項5
li>
ul>
<
button
onclick
="insert1()"
>新增列表項0
button
>
<
button
onclick
="clone3()"
>再增列表項3
button
>
<
button
onclick
="insert6()"
>新增列表項6
button
>
body
>
<
script
>
function
insert1()
function
insert6()
function
clone()
script
>
html
>
remove和replace節點
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>remove和replace節點
title
>
head
>
<
body
>
<
button
onclick
="remove()"
>刪除
button
>
<
button
onclick
="replace()"
>替換
button
>
<
img
src="../../../img/f3_android1.png"
alt=""
id="img1"
>
body
>
<
script
>
function
remove()
function
replace()
script
>
html
>
DOM 節點層次
一 dom1級定義了乙個node介面，這個介面是由dom中的所有節點型別實現的。node介面共有12種節點型別，常見的是元素節點 文字節點和文件節點。node.element node 1 元素節點 node.text node 3 文字節點 node.document node 9 文件節點 二 ...
js DOM層次節點（一）
dom 文件物件模型 是針對html和xml文件的乙個api。dom描繪了乙個層次化的節點樹，允許開發人員新增，移除和修改頁面的某一部分。節點分為幾種不同的型別，分別表示文件中不同資訊及標記。每個節點都有各自的特點，資料等，也與其他節點存在某種關係。節點之間的關係構成了層次，所有頁面標記為乙個以特定...
LOD細節層次節點（分級型節點）
空間的細節層次控制原理，是指通過空間距離的遠近來展現空間造型的各個心結。細節層次控制和現實世界中的感觀是極為相似的。在x3d世界中，根據不同的細節層次建立出不同的造型，然後再根據在x3d中的視點與立體空間造型的遠近在瀏覽器中呼叫不同細節的空間造型。lod level of detail 細節層次節點...