js筆記整理5

2021-10-21 20:05:33 字數 2451 閱讀 9857

dom:文件物件模型

資料結構:

線性: 單鏈表 迴圈鍊錶 佇列 棧 陣列

樹狀:二叉樹 平衡樹 紅黑樹

網狀:有向圖 無向圖 (尋路演算法 a*演算法)

dom樹

html檔案對於人來說可以很清楚地看見所有的網頁資料,但是機器並不能看懂。

此時就用到了dom樹,轉化為瀏覽器能理解的資料結構,方便查詢、修改、遍歷等操作。

dom實際上就是乙個資料結構。

資料結構:線性的(單鏈表,迴圈鍊錶,棧,佇列,陣列),樹形的(二叉樹,平衡樹,紅黑樹),網狀的(有向圖,無向圖,(尋路演算法,a*演算法) )。

document 節點:只有乙個

下面有:標籤節點 元素節點 文字節點

找節點的常用三種方式(定位方法):

1.通過id來查詢

2.通過標籤名字來查詢

3.通過class來查詢

通過id來查詢:

在js裡面id具有唯一性

定義乙個div標籤的id為div1,既可以通過id來查詢div

var div1 = document.getelementbyid(「div1」);(獲取到節點)

通過標籤名來查詢:假設網頁中有兩個

標籤。同乙個標籤的class可以寫多個。

var ps = document.getelementsbytagname(「p」); 返回的是乙個陣列。

var p1 = ps[0]; 獲取到第乙個p節點。

通過class來查詢:假設有兩個class都叫txt

document.getelementbyclassname(「txt」); 也是返回陣列。

通過id查詢獲取到的直接是乙個節點。

通過tag和class查詢得到的一定是陣列,就算只有乙個也是陣列。

通過id查詢一定要有document。tag和class可以在任一標籤結點上使用。

可以用比如div1.getelementsbyclassname(「txt1」); 可以不用document。

建立節點 新增節點到dom樹 刪除節點

var div1 = document.getelementbyid(「div1」);

建立乙個p標籤刪除div2

刪除節點:removechild();

第一種(根據父節點刪除)

var div2 = document.getelementbyid(「div2」); //先獲取到div2

div1.removechild(div2); //div1裡面刪除 div2(這種方法要先找到div2的父類div1)

第二種(自己刪除自己)

div2.parentnode.removechild(div2);

對節點的屬性、內容進行操作:

對於html中已經定義好的屬性,可以用物件的形式來進行獲取和修改。

var img1 = document.getelementbyid(「img1」);

換:img1.src = 「qiuqiu.jpg」;

修改class的值

比如img.style.color = 「black」;

獲取屬性:

img1.getattribute(""); //獲取img的屬性

設定屬性的值:

img1.setattribute("",""); 第乙個引號是屬性名,第二個引號是屬性值。

img1.removeattribute("")引號裡面是要刪除的屬性名稱。

img1.setattribute("",""); 要新增的屬性名和屬性值。

修改標籤下面的文字內容:

先獲取節點:

var p1 = document.getelementbyid(「p1」);

p.innerhtml = 「」; (獲取p標籤內的所有內容,可以進行替換和新增)

innerhtml新增的是屬於html的**,比如可以在裡面寫標籤,鏈結等,都是可以生效的。

新增純文字:p1.textcontent = 「」;

JS筆記整理 五

dom操作 node操作 1.document.getelementbyid id 2.document.getelementsbyname name 3.document.getelementsbytagname tagname 4.document.getelementsbyclassname ...

jQuery原理整理筆記5

button click function 新增節點2,刪除節點 remove expr 刪除指定元素 empty 刪除指定元素的內容和子元素,指定元素自身不會被刪除 datach expr 刪除指定元素 button click function 刪除節點 我是div 我是段落 3,替換節點 替換...

C語言整理筆記(5)

判斷輸入的整數是奇數還是偶數並顯示出來,如下 includeint main void 輸入兩個整數值,判斷他們是否相等,如下 includeint main void 與 運算子相反,用來判斷兩個運算元是否不相等的是!運算子。這兩種運算子統稱為相等運算子。判定輸入整數的個位數是否為5 並顯示相應資...