一咙边、時間函數(shù)|定時器
1.重復(fù)執(zhí)行定時器
方法名 : setInterval()
作用 : 每隔多長時間執(zhí)行一次函數(shù),重復(fù)執(zhí)行
參考語法:
setInterval(function(){
},時間)
2.延遲執(zhí)行定時器
方法名 : setTimeOut()
作用 : 延遲多長時間以后執(zhí)行一次
參考語法:
setTime(function(){
? ? ...要執(zhí)行的代碼..
},時間)
時間:毫秒數(shù)
2.1流程方法
1. 獲取div節(jié)點
2. 添加一個點擊事件
3. 延遲執(zhí)行定時器 div中顯示
3.清除定時器
3.1 clearInterval
3.2 clearTimeOut
二、history對象
1.forwar
2.go
3.back
三驼侠、loction對象
四教硫、JS-DOM對象
1.DOM文檔對象模型
DOM賦予我們可以操作頁面的能力
可以創(chuàng)建,插入,修改,刪除元素等等
2.節(jié)點
HTML中任何元素,都是一個節(jié)點,DOM就是能夠操作這些節(jié)點
2.1節(jié)點的分類
2.1.1 文檔節(jié)點 :?
文檔本身,整個文檔document
2.1.2 元素節(jié)點 :?
所有HTML元素
2.1.3 屬性節(jié)點 :
2.1.4 文本節(jié)點 :
2.1.5 注釋節(jié)點 :
2.2獲取節(jié)點
2.2.1 根據(jù)id值獲取節(jié)點
方法名 : document.getElementById("id值")
作用 : 根據(jù)元素的id屬性值,獲取到唯一一個元素節(jié)點
參考語法 :?
? ? var div1=document.getElementById("div1");
2.2.2 根據(jù)元素名獲取節(jié)點
方法名 : 主語.getElementsByTagName("元素名")
作用 : 根據(jù)元素名字獲取一組元素
注意 : 這種方式獲取的節(jié)點為數(shù)組,所以要利用數(shù)組的方式進行操作
主語:document|父節(jié)點
? ? var ps=document.getElementsByTagName("p");
? ? ps[0].style.color="blue";
2.2.3 根據(jù)屬性值獲取節(jié)點
方法名 : 主語.getElementsByClassName("class屬性值")
作用 : 根據(jù)class屬性值獲取一組元素
2.2.4 根據(jù)名稱獲取節(jié)點
方法名 : getElementsbyName()
2.3 創(chuàng)建節(jié)點
2.3.1創(chuàng)建節(jié)點
方法名 : creatElement()
輸入?yún)?shù) : 元素標(biāo)簽名
主語 : document
返回值 : 新節(jié)點
2.3.2 插入節(jié)點
方法名 : appendChild()
輸入?yún)?shù) : 要插入的節(jié)點
主語 : 父節(jié)點
返回值 : 追加的節(jié)點
注意 : 這種創(chuàng)建是追加元素,在父節(jié)點中的最后位置追加
2.3.3插入節(jié)點,不追加
方法名 : insertBefore(childNode1,ChildNode2)
輸入?yún)?shù):
????ChildNode1 要插入的節(jié)點
????ChildNode2 父節(jié)點中的指定子節(jié)點
主語 : 父節(jié)點
返回值 : 返回第一個參數(shù),要插入的節(jié)點
注意,如果ChildNode2位null或undefind,效果同與appendChild(),必須給2個參數(shù)
五、間接查找
1. 方法名firstChild
作用 : 返回元素的第一個子節(jié)點
2. 方法名lastChild
作用 : 返回元素的最后一個子節(jié)點
3. 方法名nextSibling
作用 : 返回元素的下一個兄弟節(jié)點
4. 方法名parentNode
作用 : 返回元素的父節(jié)點
5. 方法名previousSibling
作用 : 返回元素的上一個兄弟節(jié)點
六、操作節(jié)點
1.替換節(jié)點
方法名 : 替換節(jié)點 replaceChild(child1,child2)
作用 : 使用參數(shù)1替換參數(shù)2
輸入?yún)?shù):
????child1:要替換的節(jié)點
????child2:被替換的節(jié)點
主語:父節(jié)點
返回值:被替換的節(jié)點
2.克隆節(jié)點
方法名 : 克隆節(jié)點 cloneNode(boolean)
作用 : 克隆某個節(jié)點
輸入?yún)?shù):
????true:子節(jié)點也被克隆
????false:只克隆當(dāng)前節(jié)點的結(jié)構(gòu),不包括子節(jié)點 默認(rèn)為false
主語:要克隆的節(jié)點
返回值:返回克隆的節(jié)點
注意 : JS代碼不會被克隆,如果JS效果已運行,那么會克隆已經(jīng)完成效果后的代碼
注意2 : 克隆的代碼會存在id屬性,如果原節(jié)點存在id屬性,手動修改新節(jié)點的id
3.刪除節(jié)點
方法名 : removeChild()
輸入?yún)?shù) : 要移除的節(jié)點
主語 : 父節(jié)點
返回值 : 被刪除的節(jié)點
七帖蔓、操作表單
1.表單元素
表單元素都可以根據(jù)dom獲取節(jié)點的方式獲取
特殊獲取方式:form節(jié)點.name
2.表單元素事件
onchange 內(nèi)容有改變觸發(fā)事件
oninput 內(nèi)容有輸入觸發(fā)事件
3.form事件
onsubmit() 表單提交時
onreset() 表單重置時
4.form方法
submit() 表單提交
reset() 表單重置
