dom基礎自學

2021-09-10 19:45:39 字數 2782 閱讀 2540

day01:

1、每當你的html需要呼叫js時,都應該讓html中的內容執行完畢,才可以呼叫js,否則會出現缺少引數的狀況。這裡有兩種方法來解決這個問題:

將呼叫js的命令列發在html文件的最後

使用onload方法

window.function()
2、通過id來查詢元素

document.getelementbyid(『box』);

用來獲取id為box的標籤節點,然後可以對該標籤進行各種操作。

tagname:獲取該標籤的標籤名(div,p,ul等等,就是說明這是什麼標籤)

innerhtml:獲取該標籤中的文字內容,包括子標籤

id:獲取該標籤id的值,這裡div的id=box,則返回box

title:獲取title的值,同上

style:獲取style中的內容,這裡返回的是[object cssstyledeclaration]

也可以獲取style中具體的內容:style.color,返回style中color的值,返回red

classname:返回class的值

3、通過元素名來獲取節點列表,得到的是乙個陣列。html內容如下:

此時js中寫var box=document.getelementsbytagname(『li』); 獲取的是所有li標籤元素,而不是li中的內容。現在輸出box,得到的是乙個陣列,輸入box.length,返回3(一共有3個li)。

alert(box[0]);*!/

alert(box[0].tagname);//獲取第乙個li的標籤名 li

alert(box[0].innerhtml); //獲取第乙個li中的文字內容(也可以修改)

4、document.getelementsbyname:根據標籤中的name屬性來找到元素

js裡寫var box=document.getelementsbyname(『test』)[0]; 因為input標籤的name屬性值為test,所以定位在此處,然後可以通過box.value和box.name來獲取該標籤下的所對應的屬性的值

5、當定位到某個元素時,可以為該元素新增和修改屬性和值

新增和修改:setattribute 如果新增的屬性不存在則新增,存在則覆蓋

刪除:removeattribute

/*window.function () */

/*window.function ()*/

6、dom節點

dom節點有三種,分別是元素節點1、屬性節點2和文字節點3,這些節點有三個常用屬性:nodename、nodetype和nodevalue

nodetype:獲取指定元素的元素節點

nodename:獲取元素的名稱

nodevalue:獲取元素的值

window.function ()
使用getelementbyid找到指定的元素位置

使用childnodes方法,獲取當前元素的所有子節點,返回的是乙個陣列

然後可以得到該陣列的具體某一項

nodevalue和innerhtml的區別在於,前者返回文字節點本身的內容,後者返回元素內部的所有內容包括子節點的內容

分別使用nodevalue和innerhtml來修改文字內容

/*

window.function ()*/

day2

昨天其實有一段講的是如何忽略或清除html中的空白文字字元,本來我以為沒啥用,今天看了看還是有用處的。比如我想通過定位好的元素,向他的後方新增乙個節點,就需要用到清除空白字元方法。

為什麼呢?

先看看我們是如何向元素後方新增乙個節點的呢,目前已經知道insertbefore()方法可以向該元素前建立乙個節點。但是只有向前新增的,沒有向後新增的方法。最簡單的解決辦法就是直接向該元素的下乙個元素前新增乙個節點,這樣就達到了預期的效果。

**如下

var box = document.getelementbyid('booox'); //首先定位到boox的div元素處

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

var text = document.createtextnode('123'); //建立乙個文字節點test,文字內容為123

function insertafter(newelement,targetelement)

insertafter(p,box);

window.function ()

else

}insertafter(p,box);//呼叫自定義函式,將新節點和目標節點傳過去。

}function filterspancenode(nodes) { //建立清除空白文字節點方法

for(var i=0;i這裡總算是吧昨天忽略的東西補上了。。。

今天新學的是什麼呢?

節點的操作

createelement():建立乙個元素節點

creattextnode():建立乙個文字節點

insertbefore():在目標節點前插入乙個節點

repalcechild(a,b):把節點b換成節點a

clonenode(ture ||false):轉殖節點,ture把節點中的內容一起轉殖,false只轉殖節點標籤,不轉殖內容

removechild():刪除指定節點

mysql自學基礎

mysql 檢視庫列表 show databases 使用庫 use mysql 檢視庫中的資料表資訊 show tables 顯示資料表結構 describle mysql.user 檢視使用者 describe user create 建立新庫名字為auth create database au...

DOM基礎 節點

一 定義 dom documentobject model 即文件物件模型。針對html和xml文件的api。d 文件 可以理解為整個web載入的網頁文件 o 物件 可以理解為類似window物件之類的東西,例如document,可以呼叫屬性和方法。m 模型 可以理解為網頁文件的屬性結構。1.節點 ...

DOM命令基礎

win r 按住shift 單擊滑鼠右鍵點 在此處進入powershall視窗 點選單欄下的windows 系統 命令提示符 以管理員身份執行 碟符切換 d 檢視當前目錄下的所有檔案 dir 跨盤切換當前目錄 進入 cd d c users 進入當前目錄的檔案 cd 目錄名字 返回到上上級目錄 cd...