this is a paragraph with a list follwing it.
//-
//
- Item 1 //
- Item 2 //
- Item 3 //
摘要:如他返回的對象是。方法,這個方法用于確定文檔是否獲得了焦點。另外,需要注意的是,該屬性插入元素并不會執行其中的腳本。在中,方法接收一個字符串,返回一個經過無害處理后的版本。屬性同樣的,在讀模式下返回調用它的元素及所有子節點的標簽。
與類相關的擴充 getElementsByClassName()方法
接收一個參數,即一個或多個類名的字符串。如:
console.log(document.getElementsByClassName("info danger")); //HTMLCollection
他返回的對象是NodeList。
classList屬性該屬性是DOMTokenList 的實例。主要的方法有:
add(value)
contaiin(value)
remove(value)
toggle(value)
如:
var p = document.querySelector(".info"); p.classList.add("danger"); console.log(p.classList.contains("danger")); //true console.log(p.className); //info danger p.classList.remove("info"); console.log(p.classList.contains("info")); //false console.log(p.className); //danger p.classList.toggle("helloWorld"); console.log(p.className); //danger helloWorld
如果不用classList屬性,則需要通過className屬性來操作。如:
以下面的代碼為例:
js部分如下:
//刪除 user 類 var div = document.getElementById("divId"); //首先取得類名并拆分成數組 var classNames = div.className.split(/s+/); var pos = -1, i, len; for (i = 0, len = classNames.length; i < len; i++) { if (classNames[i] == "user") { pos = i; break; } } classNames.splice(i, 1); div.className = classNames.join(" "); console.log(div.className); //bd disabled焦點管理 document.activeElement屬性
這個屬性會引用Dom中當前獲得了焦點的元素。元素獲得焦點的方式有頁面加載、用戶輸入(Tab鍵)和在代碼中調用focus()方法如:
var x = setTimeout(echo, 0); function echo () { var data = document.activeElement; var newP = document.createElement("p"); newP.appendChild(document.createTextNode(data)); document.body.appendChild(newP); var y = setTimeout(echo, 1000); }
以上代碼會write當前獲得焦點的元素;文檔剛剛加載完成時,document.activeElement中保存的是document.body元素的引用。文檔加載期間則為null。
document.hasFocus()方法,這個方法用于確定文檔是否獲得了焦點。如:
var btn = document.getElementById("btn"); btn.focus(); document.write(document.hasFocus()); //trueHTMLDocument的變化 readyState屬性
該屬性可能有兩個值:loading(正在加載文檔);complete(加載文檔完畢)用法是套用if條件語句:
document.write(document.readyState); //loading var x = setTimeout(print, 2000); function print () { document.write(document.readyState); //complete }compatMode屬性(兼容模式)
這個屬性就是為了告訴開發人員瀏覽器采用了哪種渲染模式。標準模式下為CSS1Compat;混雜模式下為BackCompat如:
if(document.compatMode == "CSS1Compat"){ console.log("Standards mode"); }else{ console.log("Quirks mode"); }head屬性
引用文檔的head元素,可以結合使用這個屬性和另一種后備方法。
var head = document.head || document.getElementsByTagName("head")[0];字符集屬性 charset屬性和defaultCharset屬性
前者為文檔中實際使用的字符集;后者為文檔默認的字符集應該是什么;如:
if (document.charset != document.defaultCharset) { document.write("自定義字符集:" + document.charset); //自定義字符集:UTF-8 }自定義數據屬性 dataset屬性和data-name形式的屬性
前者是用來訪問自定義屬性的值;后者則是添加非標準屬性的格式;如:
var p = document.getElementById("pId"); //獲得屬性 p.dataset.appid = "123"; //設置自定義屬性的值 p.dataset.appId = "321"; //設置自定義屬性的值 document.write(p.attributes[p.attributes.length - 2].nodeName); //data-appid document.write(p.attributes[p.attributes.length - 1].nodeName); //data-app-id插入標記
通過DOM操作對要插入大量新的HTML標記下非常麻煩;使用插入標記技術則更加方便。
innerHTML屬性在讀模式下,該屬性返回HTML標記;如:
var div = document.getElementById("content"); console.log(div.innerHTML); //chrome會原原本本的返回文檔的格式,包括縮進: //this is a paragraph with a list follwing it.
//
在寫模式下,該屬性則根據指定創建新的DOM樹,然后會用這個DOM樹完全替換掉原先的所有子節點;如:
var newP = document.createElement("p"); newP.innerHTML = "good ..."; document.body.appendChild(newP);
不通的瀏覽器返回的文本格式會有所不同,不要指望所有瀏覽器返回的值完全一樣。
如果設置的值沒有HTML標簽,那么結果就是設置純文本。
另外,需要注意的是,該屬性插入script元素并不會執行其中的腳本。但在IE8及更早的中,元素script被指定為defer屬性以及位于“有作用域的元素”之后才會執行。
大多數瀏覽器都支持插入style元素,但IE8及更早的版本則需要前置一個“有作用域的元素”。
不支持innerHTML屬性的元素有:col、colgroup、frameset、head、html、style、table、tbody、thead、tfoot和tr。
在IE8中,window.toStaticHTML()方法接收一個HTML字符串,返回一個經過無害處理后的版本。
outerHTML屬性同樣的,在讀模式下返回調用它的元素及所有子節點的HTML標簽。在寫模式下,會創建新的DOM子樹,然后用這個DOM子樹完全替換調用元素。如:
var div = document.getElementById("content"); div.outerHTML = "hello there
"; //該屬性直接用p元素替換了div元素
innerHTML與outerHTML兩者的區別如下:
var div = document.getElementById("content"); console.log(div.innerHTML); console.log(div.outerHTML); // [L] testingjs.js:2 //this is a paragraph with a list follwing it.
//
this is a paragraph with a list follwing it.
//end
"; console.log(div.innerHTML); console.log(div.outerHTML); // [L] testingjs.js:22end
// [L] testingjs.js:23end
該方法接收兩個參數:一個是要插入的位置;另一個是要插入的HTML文本。第一個參數可選擇以下值:
beforebegin:在當前元素之前插入一個相鄰的同輩元素;
afterend:在當前元素之后插入一個相鄰的同輩元素;
beforeend:在最后一個子元素之后再插入一個新的子元素;
afterbegin:在第一個子元素之前再插入一個新的子元素;
如下:
var div = document.getElementById("content"); console.log(div.outerHTML); //scrollIntoView()方法div.insertAdjacentHTML("beforebegin", "para
new para
"); console.log(div.parentNode.outerHTML); //new para
div.insertAdjacentHTML("afterend", "para
another para
"); console.log(div.parentNode.outerHTML); //new para
para
another para
div.insertAdjacentHTML("afterbegin", "new child para
"); console.log(div.outerHTML); //div.insertAdjacentHTML("beforeend", "new child para
para
another child para
"); console.log(div.outerHTML); //new child para
para
another child para
該方法可以在所有HTML元素上調用,如果給這個方法傳入true,或者不傳入參數,那么窗口滾動之后會讓調用元素的頂部與視口頂部盡可能平齊。如果傳入FALSE,調用元素會盡可能全部出現在視口中。如:
document.body.onclick = function view() { var p = document.getElementById("pId"); var sH = window.innerHeight; p.style.height = sH + "px"; console.log(sH); p.scrollIntoView(false); };
沒考慮兼容性
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78323.html
摘要:另外,以及這兩個方法,在測試了一下,并無反應。不知是否兼容問題。下面是獲得焦點的時候,自動以每毫秒的速度往下滾屏 文檔模式 頁面的文檔模式是由IE8引入的,文檔模式決定了可以使用的CSS級別、JS中的API以及如何對待文檔類型(doctype);在IE9,提供了4中文檔模式: IE5:混雜模式; IE7:IE7標準模式渲染頁面; IE8:IE8標準模式渲染頁面,可以使用Selecto...
摘要:歷史狀態管理是現代應用開發中的一個難點。通過更新對象為管理歷史狀態提供了方便。而通過狀態管理,能夠在不加載新頁面的情況下改變瀏覽器的。在和中,傳遞給或的狀態對象中不能包含元素。還支持一個屬性,它返回當前狀態的狀態對象。 歷史狀態管理是現代Web應用開發中的一個難點。在現代Web應用中,用戶的每次操作不一定會打開一個全新的頁面,因此后退和前進按鈕也就失去了作用,導致用戶很難在不同狀態間切...
摘要:事件除了大量屬性之外,這兩個媒體元素還可以觸發很多事件。下表列出了媒體元素相關的事件。這兩個媒體元素都有一個方法,該方法接收一種格式編解碼器字符串,返回或空字符串。 audio和video元素的用法如下: 不支持音頻 不支持視頻 因為并非所有瀏覽器都支持所有媒體格式,所以可以指定多個不同的媒體來源。為此,不用在標簽中指定src屬性,而是要像下面這樣使用一或多個元素。 ...
閱讀 1755·2021-11-18 13:20
閱讀 1140·2021-10-11 10:59
閱讀 2986·2021-08-24 10:01
閱讀 3499·2019-08-29 14:21
閱讀 3351·2019-08-29 14:15
閱讀 3512·2019-08-26 12:23
閱讀 3342·2019-08-26 11:46
閱讀 3344·2019-08-26 11:35