讀javascript高階程式設計10 DOM

2021-09-06 17:27:35 字數 4112 閱讀 5731

元素的childnodes屬性來表示其所有子節點，它是乙個nodelist物件，會隨著dom結構的變化動態變化。

var headlines=document.getelementbyid("headline_block");


var childs=headlines.childnodes;


childs.length;//1


childs[0];//


取第乙個子節點


childs.item(0);//


取第乙個子節點


2.insertbefore(newnode,somenode)：向指定位置來插入子節點。第乙個引數是要插入的節點，第二個是作為參照的節點。


3.replacechild(newnode,oldnode)：替換節點。第乙個引數是要插入的新節點，第二個引數是要被替換掉的節點。


4.removechild(somenode)：移除節點指定節點。


常用node型別


1. 基本屬性


2. 文件資訊:


document.title：獲取或修改頁面title，修改後會反映在瀏覽器標籤頁上，但是不會修改元素。


document.title;//


" - 開發者的網上家園"


document.title="-小靜";


document.url:顯示頁面完整的url。


document.domain：頁面的網域名稱，該屬性是可以設定的。但要注意幾點：


例如當前在快閃儲存器主頁：


報錯document.domain="cnblogs.com";//


可以document.domain="home.cnblogs.com";//


報錯document.domain;//


"cnblogs.com"
3. 特殊集合

element型別提供了對標籤名、子節點、特性的訪問和操作。

1.標籤名

tagname返回的是標籤名大寫格式，比較時要先進行大小寫轉換。

node.tagname.tolowercase()=="a";
2.html元素基本特性classname：與元素的class特性對應，用於指定元素的css樣式。

3.元素屬性

1. nodename="#text"

2. 獲取節點文字內容：nodevalue或者data屬性均可。

3. 操作文字節點內容

deletedata(offset,count)：從offset位置開始刪除count個字元。

insertdata(offset,text)：從offset位置插入文字text。

replacedata(offset,count,text)：用text替換從offset位置開始長度為count的文字。

substringdata(offset,count)：提取從offset位置開始長度為count的文字。

splittext(offset)：從指定位置將文字節點分割為兩個文字節點。

4. normalize()：規範化文字節點。在包含多個文字節點的元素上呼叫該方法，會將其文字節點進行合併。

var node=document.getelementbyid("ing_body_578997");


//獲取文字節點


var textnode=node.childnodes[0];


//獲取節點文字值


var data=textnode.data;//


"最近學js高階程式設計，又是基礎書，該掉粉了，`(*∩_∩*)′"


//追加文字


最近學js高階程式設計，又是基礎書，該掉粉了，`(*∩_∩*)′text


//刪除文字片段


textnode.deletedata(8,10);//


最近學js高階編粉了，`(*∩_∩*)′text


//插入文字


textnode.insertdata(8,"");//


最近學js高階編粉了，`(*∩_∩*)′text


//替換文字


textnode.replacedata(5,25,',加油');//


最近學js加油


//獲取文字片段


textnode.substringdata(5,1);//,//


分割為多個節點


textnode.splittext(',');


console.log(node.childnodes.length);//2


//規範化


node.normalize();


console.log(node.childnodes.length);


//1
可以作為倉庫使用，儲存未來要新增到文件中的節點。

(function


()})();
1.動態指令碼

①通過src包含外部指令碼檔案。載入完成後就可以在頁面其他地方呼叫了。

function


loadscriptsrc(src)


loadscriptsrc("validate.js");


checkname();
②動態新增行內**指令碼。**作用域為全域性，而且執行完後立馬可用。

function


loadscript()


catch


(ex)";


}}
loadscript();

begin();

2.動態樣式

注意樣式要新增到head中。

①使用link動態新增來自外部的樣式檔案，執行是非同步的。

function


loadcss(url)


loadcss("")
②使用style動態新增嵌入式css樣式**。向頁面中新增樣式後立即就能看到效果。

function


loadcss(css)


catch


(ex)


var head=document.getelementsbytagname("head")[0];


}loadcss("body");

JavaScript高階程式設計

ecmascript有5種基本型別資料 另外還有一種複雜的資料型別 typeof就是用來檢測變數的資料型別的，typeof可能會返回以下值 typeof操作符在檢測引用型別的值時，總是會返回object，所以用處不大。instanceof用來檢測物件型別的，返回值是 true false。例如 pe...

JavaScript高階程式設計 this

在函式中this到底取何值，是在函式真正被呼叫執行的時候確定的，函式定義的時候確定不了 因為this的取值是執行上下文環境的一部分，每次呼叫函式，都會產生乙個新的執行上下文環境。所謂建構函式就是用來new物件的函式。其實嚴格來說，所有的函式都可以new乙個物件，但是有些函式的定義是為了new乙個物件...

javascript 高階程式設計 二

這裡我們直接進入主題 在js剛剛開始的時候，必須面臨乙個問題，那就是如何使的js的載入和執行不會影響web核心語言html的展示效果，和html和諧共存。在這個背景下 2 xhtml中的應用 在html中如果字串，那麼html就會認為js指令碼已經結束所以會產生乙個錯誤用一下 來替換 來替換aler...