摘要:節(jié)點層次類型和屬性假設(shè)我的是一個元素返回至于就是元素的名稱節(jié)點關(guān)系每個節(jié)點都有一個屬性其中保存著一個對象是一個類數(shù)組對象這個對象有屬性但不屬于對象會隨著結(jié)構(gòu)變化而變化因為是類數(shù)組所以訪問里面的屬性可以使用索引也可以使用方法效果是一樣的
節(jié)點層次
?
node類型-dom1 nodeName和nodeValue屬性https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
Constant Value Description Node.ELEMENT_NODE 1 An Element node such asor
. Node.TEXT_NODE 3 The actual Text of Element or Attr. Node.PROCESSING_INSTRUCTION_NODE 7 A ProcessingInstruction of an XML document such as declaration. Node.COMMENT_NODE 8 A Comment node. Node.DOCUMENT_NODE 9 A Document node. Node.DOCUMENT_TYPE_NODE 10 A DocumentType node e.g. for HTML5 documents. Node.DOCUMENT_FRAGMENT_NODE 11 A DocumentFragment node.var test = document.getElementById("aaa"); //假設(shè)我的aaa 是一個p元素 console.log(test.nodeType); if(test.nodeType == 1){ console.log("Node is an element"); console.log(test.nodeName); //返回p }至于nodeValue就是元素Element的名稱
節(jié)點關(guān)系每個節(jié)點都有一個childNodes屬性,其中保存著一個NodeList對象,是一個類數(shù)組對象(這個對象有l(wèi)ength屬性,但不屬于Array對象)會隨著dom結(jié)構(gòu)變化而變化
因為是類數(shù)組,所以訪問里面的屬性可以使用索引,也可以使用item()方法,效果是一樣的
dasdasdasdasdas
dasdasdasdasdas
dasdasdasdasdas
dasdasdasdasdas
var test = document.getElementById("bbb"); console.log(test.childNodes.length);//返回9,因為把空格都當(dāng)成了節(jié)點,所以并不準確 console.log(test.childNodes[0]);//返回一個#text對象,空白被當(dāng)成了文本對象 console.log(test.childNodes[1]);//返回1
console.log(test.childNodes.item(0));//返回一個#text對象,空白被當(dāng)成了文本對象 console.log(test.childNodes.item(1));//返回1
因為childNodes會把dom里面的空格,也會計算進去,并且不同瀏覽器的空白也是不一樣的,所以進行處理的時候需要先清理空白的dom
每一個節(jié)點都會有一個parentNode屬性,指向父節(jié)點
previousSibling指向前一個節(jié)點,nextSibling指向后一個
hasChildNodes判斷是否包含子節(jié)點
操作節(jié)點需要基于有parentNode屬性才能使用
appendChild() 末尾添加一個節(jié)點
insertBefore() 指定在某個位置添加一個節(jié)點,兩個參數(shù)(要插入的節(jié)點和作為參照的節(jié)點)
replaceChild() 替換節(jié)點,兩個參數(shù)(要插入的節(jié)點和要替換的節(jié)點)
removeChild() 移除節(jié)點
cloneNode() 復(fù)制節(jié)點,參數(shù)是布爾值,是否進行深復(fù)制,深復(fù)制就是把所有子節(jié)點也復(fù)制,另外這個方法不會復(fù)制事件屬性
Document類型var body = document.body; //取得body的引用 var title = document.title; //取得title的引用 console.log(document.URL); //取得完整的URL console.log(document.domain); //取得域名 console.log(document.childNodes[0]);//對于document來說第一個元素就是htmlgetElementById 查找id
getElementByTagName 查找元素
getElementByName 查找有name屬性的元素var test = document.getElementsByTagName("*"); console.log(test);//獲取所有的文檔元素 console.log(test[0]);//返回html元素 console.log(test[1]);//返回head元素Element類型獲取屬性的話,自定義屬性需要加上data-
var div = document.getElementById("aaa"); console.log(div.id); //可以獲取這些屬性 div.id = "xxxx"; //也可以設(shè)置這些屬性 console.log(div.className); console.log(div.title); console.log(div.lang); //也可以這樣獲取屬性 console.log(div.getAttribute("id")); console.log(div.getAttribute("class")); console.log(div.getAttribute("title")); //也可以這樣設(shè)置屬性 div.setAttribute("id","ooooo"); //移除屬性 div.removeAttr("class");創(chuàng)建元素createElement創(chuàng)建的元素是沒有加入到文檔樹中的,所以可以對其進行編輯后再放入文檔樹
//先創(chuàng)建元素 var div = document.createElement("div"); //編輯元素的屬性 div.id = "myNewDiv"; div.className = "box"; //再放入文檔樹 document.body.appendChild(div);元素的子節(jié)點var ul = document.getElementById("list"); //用tagname來獲取所有的li標簽 var items = ul.getElementsByTagName("li");dom操作技術(shù) 動態(tài)加載腳本//創(chuàng)建script元素 var script = document.createElement("script"); //寫入type屬性,javascript的屬性是text/javascript script.type = "text/javascript"; //寫入js文件的路徑和文件名 script.src = "client.js"; //寫入dom樹 document.body.appendChild(script);動態(tài)樣式需要注意的是css是放在head的
var link = document.createElement("link"); link.rel - "stylesheet"; link.type = "text/css"; link.href = "style.css"; //因為只有一個head,所以用[0]數(shù)組第一個元素獲取head標簽 var head = document.getElementsByTagName("head")[0]; head.appendChild(link);選擇符API querySelector()方法返回第一個匹配的元素
//支持元素,id,類,跟css的選擇器和jq的選擇器很像 var body = document.querySelector("body"); var myDiv = document.querySelector("#myDiv"); var selected = document.querySelector(".selected"); var img = document.body.querySelector("img.button");querySelectorAll()返回所有匹配的元素,是一個集合
var ems = document.getElementById("myDiv").querySelectorAll("em"); var i ,len = ems.length; //需要循環(huán)遍歷來獲取每一個元素,也可以用item()方法 for(i=0;imatchSelector() 如果選擇符和實際的元素匹配,就會返回true,不過因為瀏覽器之間的實現(xiàn)有差異,如果需要使用,就要封裝一下:
function matchesSelector(element, selector) { if (element.matchesSelector) { return element.matchesSelector(selector); } else if (element.msMatchesSelector) { return element.msMatchesSelector(selector); } else if (element.mozMatchesSelector) { return element.mozMatchesSelector(selector) } else if (element.webkitMatchesSelector) { return element.webkitMatchesSelector(selector); } else { throw new Error("Not supported"); } }元素遍歷childElementCount 返回子元素(不包括文本節(jié)點和注釋)的個數(shù)
firstElementChild 指向第一個子元素
lastElementChild 指向最后一個子元素
previousElementSilbing 指向前一個同輩元素
nextElementSibling 指向后一個同輩元素
這些屬性不必擔(dān)心文本空白節(jié)點
var i,len,child = element.firstChild; //舊方式 while(child != element.lastChild){ if(child.nodeType == 1){ //需要判斷是不是元素,因為有可能是空白文本節(jié)點 processChild(child); } child = child.nextSibling; } //新方式 while (child != element.lastElementChild){ //這里不需要判斷了 processChild(child); child = child.nextElementSibling; }H5 api getElementsByClassName() 查找類console.log(document.getElementsByClassName("class"));className屬性test1 console.log(document.getElementById("test1").className.split(/s+/));如果要刪除類,一個元素有兩個class,一個class1 一個class2,假如要刪除class2
var div = document.getElementById("test1"); //將class組成一個數(shù)組 var classNames = div.className.split(/s+/); var pos = -1, i; var len = classNames.length; for (i = 0; i < len; i++) { //只要這個數(shù)組里面有要刪除的classs if (classNames[i] == "class2") { pos = i; break; } } //刪除class組成的數(shù)組的一個元素,這個元素就是剛才匹配我們要刪除的元素 classNames.splice(pos, 1); //重新將數(shù)組組成一個字符串,賦值到html元素的的className div.className = classNames.join(" ");很多js庫都實現(xiàn)了這個方法,以簡化這些操作
換成h5的api的話
console.log(div.classList); //返回nodelist console.log(div.classList.remove("class1"));//很方便的刪除和添加class console.log(div.classList.add("class3"));焦點管理var button = document.getElementById("myButton"); //只要有元素活的焦點,文檔也就也有焦點 button.focus(); //確定文檔是否獲得焦點兩種方式 console.log(document.activeElement === button);//返回true console.log(document.hasFocus());//返回true自定義數(shù)據(jù)html5 規(guī)定可以為元素添加非標準屬性,但要添加data-前綴
test1 var div = document.getElementById("test1"); console.log(div.dataset.myname);//返回haha div.dataset.myname = "lala"; console.log(div.dataset.myname); //修改為lala專業(yè)擴展//強制ie7模式innerHTMLvar div = document.getElementById("test1"); div.innerHTML = "adasda
" + "";dom2 dom3 css設(shè)置需要注意的是一些特殊符號需要轉(zhuǎn)義,例如雙引號要"
div.style.backgroundColor = "red"; div.style.width = "100px";偏移量offsetHeight 元素在垂直方向上占用的像素距離
offseWidt 略
offsetLeft 元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離
offsetTop 略
圖片描述?
客戶區(qū)代大小元素的客戶區(qū)大小指的是元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小
clientWidth
clientHeight
圖片描述?
滾動大小包含滾動內(nèi)容的元素的大小
scrollHeight 在沒有滾動條的情況下,元素內(nèi)容的總高度
scrollWidth, ...總寬度
scrollLeft 被隱藏在內(nèi)容區(qū)域左側(cè)的像素數(shù),通過設(shè)置這個屬性可以改變元素的滾動的位置
scrollTop 被隱藏在內(nèi)容區(qū)域上方的像素數(shù),通過設(shè)置這個屬性可以改變元素的滾動的位置
?
如果元素尚未滾動時,scrollLeft和scrollTop都為0
如果元素被垂直滾動了,那么scrollTop會大于0,表示元素上方不可見內(nèi)容的像素高度
scrollLeft類似
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81264.html
摘要:事件流事件流是指從頁面接受事件的順序一般考慮兼容性問題會使用冒泡而不適用捕獲事件冒泡事件開始時由具體的元素嵌套層次最深的元素接受然后逐級向上傳播到文檔事件捕獲基本跟事件冒泡相反事件捕獲用于在于事件到達預(yù)定目標之前捕獲他首先接收到事件然后事件 事件流 事件流是指從頁面接受事件的順序showImg(https://segmentfault.com/img/bVIf9T?w=540&h=48...
摘要:一寫在前面最近重讀高級程序設(shè)計,總結(jié)下來,查漏補缺。但這種影響是單向的修改命名參數(shù)不會改變中對應(yīng)的值。這是因為對象的長度是由傳入的參數(shù)個數(shù)決定的,不是由定義函數(shù)時的命名參數(shù)的個數(shù)決定的。實際改變會同步,改變也會同步 一、寫在前面 最近重讀《JavaScript高級程序設(shè)計》,總結(jié)下來,查漏補缺。 二、JS簡介 2.1 JS組成 ECMAscript:以ECMA-262為基礎(chǔ)的語言,由...
摘要:在上百種語言中算是命好的一個,還有就是最近納入高考體系的。由以下三個部分構(gòu)成。就是對實現(xiàn)該標準規(guī)定的各個方面內(nèi)容的語言的描述。是針對但經(jīng)過擴展的用于的應(yīng)用程序編程接口。將頁面映射為由節(jié)點構(gòu)成的樹狀結(jié)構(gòu)。 JavaScript的歷史這里就不再贅述了,當(dāng)然JavaScript的歷史還是比較有意思的。在上百種語言中JavaScript算是‘命’好的一個,還有就是最近納入高考體系的python...
摘要:但是通過添加的匿名函數(shù)無法移除,最好是在其他地方定義事件處理程序的函數(shù),然后將該函數(shù)的名稱傳給第二個參數(shù)。一中的事件對象對象兼容級和級的瀏覽器將對象傳入到事件處理程序中。 一、事件流 假設(shè)有如下HTML代碼: Event Click me 其DOM樹如下圖所示:showImg(https://segmentfault.com/img/bVUUWA?w=50...
摘要:高級程序設(shè)計摘錄可選。表示通過屬性指定的代碼的字符集。這個屬性并不是必需的,如果沒有指定這個屬性,則其默認值仍為。規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行,因此第一個延遲腳本會先于第二個延遲腳本執(zhí)行,而這兩個腳本會先于事件執(zhí)行。 《javascript高級程序設(shè)計》摘錄: async:可選。表示應(yīng)該立即下載腳本,但不應(yīng)妨礙頁面中的其他操作,比如下載其他資源或 等待加載其他腳本。只對外部...
閱讀 695·2021-11-15 11:37
閱讀 3316·2021-10-27 14:14
閱讀 6038·2021-09-13 10:30
閱讀 2961·2021-09-04 16:48
閱讀 1926·2021-08-18 10:22
閱讀 2125·2019-08-30 14:19
閱讀 729·2019-08-30 10:54
閱讀 1745·2019-08-29 18:40