JavaScript檔案物件總結
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：Adobe Dreamweaver JavaScript
作者：唐文堅
撰寫時間：2020年4月25日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
什么是DOM?
DOM就是檔案物件模型英文全稱是Document Object Model。
檔案：就可以說整個的HTML的網頁。
物件：在玩網頁里的每一部分都可以轉換成物件。
模型：可以來表示關系，比如說<ul>里的<li>
模型關系圖：
節點：
節點是網頁組成最基本的部分網頁里的每一個部分都可以稱為一個節點
比如說 一些標簽a標簽li標簽這些可以說是一個節點，但是節點的種類是
不同的。
比如說：
檔案節點，就是HTML，document就是檔案節點。
元素節點：div這些就是元素節點，可以通過document的方法來獲取元素節點。
文本節點：
不是HTML里自帶的文本節點比如P標簽里的內容。
屬性節點：
不是子節點是個元素的一部分比如Id,class等
nodeName:
這個東西就只是讀取要讀的東西并不會改變什么。
列：console.log(document.nodeName);
nodeValue：
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本自身
屬性節點的 nodeValue 是屬性的值
nodeType 屬性:
只讀并回傳節點型別
元素型別 節點型別
元素 1
屬性 2
文本 3
注釋 8
檔案 9
獲取元素節點的幾個方法：
getElementById() 通過id屬性獲取一個元素節點物件
getElementsByTagName() 通過標簽名獲取一組元素節點物件
getElementsByName() 通過name屬性獲取一組元素節點物件
getElementsByClassName() 通過標類名獲取一組元素節點物件，該方法不支持IE8及以下版本
通過具體的元素節點呼叫
etElementsByTagName()
方法，回傳當前節點的指定標簽名后代節點
childNodes
屬性，表示當前節點的所有子節點
firstChild
屬性，表示當前節點的第一個子節點
lastChild
屬性，表示當前節點的最后一個子節點
列：
var input=box.getElementsByTagName("input");
console.log(input);
var nodes=box.childNodes;
var nodes=box.firstChild;
var nodes=box.lastChild;
通過具體的節點呼叫：
parentNode：
屬性，表示當前節點的父節點
previousSibling：
屬性，表示當前節點的前一個兄弟節點
nextSibling：
屬性，表示當前節點的后一個兄弟節點
設定，元素物件.屬性名=新的值
例：element.value = "hello"
innerHTML：
可以在JS里設定html里的代碼。
querySelector()：
獲取一個元素
querySelectorAll()：
獲取多個元素
節點的修改：
創建節點
document.createElement("標簽名")
洗掉節點
父節點.removeChild(子節點)
替換節點
父節點.replaceChild(新節點 , 舊節點)
插入節點
父節點.appendChild(子節點)
父節點.insertBefore(新節點 , 舊節點)
獲取元素的樣式：
1 currentStyle：
語法：元素.currentStyle.屬性名，又或者元素.currentStyle[屬性名]
這個可以讀取當前的樣式如果說沒設定的話就是一個auto了，這個只能在IE里用
getComputedStyle()：
列：var obj=getComputedStyle(要獲取的元素,null);
這個方法就可以到別的瀏覽器用，但是IE8以下就不可以用了。
使兩個方法融合的寫法：
解釋：用一個if陳述句寫好條件如果說第一個可以用就回傳第一個，如果不是就是第二個，然后封裝到一個函式里。
getComputedStyle()方法與currentStyle屬性都是只讀的屬性，不能修改屬性，如果需要修改屬性的值，只能使用style屬性
clientHeight|| clientWidth：
這兩個方法都是獲取元素的樣式不帶單位包括內容區和內邊距，只讀不改。
列：console.log("box.offsetHeight="+box.offsetHeight);
console.log("box.offsetWidth="+box.offsetWidth);
offsetParent：
獲取當前距離最近的定位的父元素如果都沒有就回傳body。
var ele=box.offsetParent;
console.log(ele);
offsetLeft：
當前元素相對應其定位元素的水平偏移量
offsetTop：
當前元素相對應其定位元素的垂直偏移量
列：console.log("box.offsetLeft="+box.offsetLeft);
scrollWidth|| scrollHeight：
獲取元素滾動區的寬高。
列：console.log("wrap.scrollWidth="+wrap.scrollWidth);
scrollLeft|| scrollTop：
獲取水平與垂直滾動的距離
列：console.log("wrap.scrollTop="+Math.round(wrap.scrollTop));
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/58565.html
標籤：非技術區