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...