JS基礎3 DOM文件

二、文件操作

1.結構規範

document

html

head
meta
title
body

charset="utf-8"/>
this is a pagetitle>
head>
id='test'>人物簡介h1>
id="introduce"
class="cli_test">
這是乙個萬眾矚目的人物li>
他曾經建立卓越的功勳li>
他令這個歐洲都為之顫抖li>
ul>
body>
html>

var ele_obj = document.getelementbyid('introduce');//返回的是個物件

console.log(ele_obj);
/**返回結果：
*/

var list = document.getelementsbytagname('li')

console.log(list[0]);
/**返回結果：
這是乙個萬眾矚目的人物
*/

var obj = document.queryselector(".cli_test li");

console.log(obj);
/**返回結果
這是乙個萬眾矚目的人物
*/var obj = document.queryselectorall(".cli_test li");
console.log(obj);
/**返回結果
這是乙個萬眾矚目的人物
他曾經建立卓越的功勳
他令整個歐洲都為之顫抖
*/

說明childnodes

所有子節點

nodename

節點名稱

innertext

元素中的內容

parentnode

父節點元素

previouselementsibling

上乙個兄弟節點元素

nextelementsibling

下乙個兄弟節點元素

firstelementchild

第乙個子元素

lastelementchild

最後乙個子元素

3.文件節點操作

var newnode = document.createelement('li');//建立乙個li元素

var newnodetext = document.createtextnode('厲害人物');//建立乙個text節點
/**返回結果
這是乙個萬眾矚目的人物
他曾經建立卓越的功勳
他令整個歐洲都為之顫抖
這個人很厲害
*/

document.queryselector(".cli_test").removechild(newnode);//刪除剛剛建立的li元素

var li_ele = document.createelement("li");
li_ele.innertext = "這將成為第乙個節點";//給這個li元素設定內容
//獲取ul的第乙個孩子
var firstchild = document.queryselector(".cli_test").firstelementchild;
//把li_ele插入到第乙個孩子之前
document.queryselector(".cli_test").insertbefore(li_ele, firstchild);
/**返回結果
這將成為第乙個節點
這是乙個萬眾矚目的人物
他曾經建立卓越的功勳
他令整個歐洲都為之顫抖
這個人很厲害
*/

js基礎複習之DOM和文件載入

1.瀏覽器已經為我們提供 文件節點 物件這個物件是window屬性 可以在頁面中直接使用，文件節點代表的是整個網頁 獲取到button物件 var btn document.getelementbyid btn 修改按鈕的文字 btn.innerhtml i m button 2.瀏覽器在載入乙個頁...

js文件物件模型DOM

1 textarea select input必須同時有id和name 2 每個節點都有兩個屬性 nodename和nodetype 但只有文字節點才會有nodue值 var p document.getelementbyidx x pnode 父節點 p.parentnode 子節點的陣列集合 p...

js入門 Dom基礎

dom documentobject model，文件物件模型。dom有三個不同的部分。1 核心dom 也是最基礎的文件結構的標準模型 2 xmldom 針對xml文件的標準模型 3 html dom 針對html文件的標準模型 對於乙個新生程式設計師來說。html是什麼，其實並不重要。但是都知道。...