元素
var em =document.getElementById("myDiv").querySelectorAll("em")
//取得類為"selected"的所有元素
var selected=document.querySelectorAll(".selected");
//取得所有元素中的所有元素
var strongs=document.querySelectorAll("p strong")
//要取得返回的NodeList中的每一個元素，可以使用item()方法，也可以使用方括號語法
var i,len,strong;
for(i=0,len=strong.length;i
matchesSelector()方法
這個方法接收一個參數(shù)，即CSS選擇符，如果調用元素與該選擇符匹配，返回true，否則返回false
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.");
}
}
if (matchesSelector(document.body, "body.page1")){
//執(zhí)行操作
}
元素遍歷
DOM新增的5個屬性
childElementCount，返回子元素的個數(shù)，不包括文本節(jié)點和注釋
firstElementCount，指向第一個子元素，firstChild的元素版
lastElementCount，指向最后一個子元素，lastChild的元素版
previousElementSibling，指向前一個同輩元素，previousSibling的元素版
nextElementSibling，指向后一個同輩元素，nextSibling的元素版
var i,
len,
child = element.firstChild;
while(child != element.lastChild){
if (child.nodeType == 1){ //檢查是不是元素
processChild(child);
}
child = child.nextSibling;
}
//使用新增的元素代碼會更簡潔
var i,
len,
child = element.firstElementChild;
while(child != element.lastElementChild){
processChild(child); //已知其是元素
child = child.nextElementSibling;
}
HTML5
與類相關的補充
getElementsByClassName()方法接收一個參數(shù)，即一個包含一或多個類名的字符串，返回帶有制定類的所有元素的NodeList，傳入多個類名時，類名的先后順序不重要。
getElementsByClassName()始終會返回與類名匹配的所有元素，在元素上調用方法就會返回后代元素中匹配的元素。
操作類名時可以通過className屬性添加、刪除和替換類名。因為className中是一個字符串，所以即使只修改字符串的一部分，也必須每次都設置整個字符串的值
...
//刪除"user"類
//首先，取得類名字符串并拆分成數(shù)組
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(" ");
HTML5為所有元素添加classList屬性，簡化上述操作
add(value)，將給定的字符串添加到列表中，如果值已經(jīng)存在，就不添加了
contain(value)，表示列表中是否存在給定的值，如果存在則返回true，否則返回false
remove(value)，從列表中刪除給定的字符串
toggle(value)，如果列表中已經(jīng)存在給定的值，刪除。如果列表中沒有給定的值，添加。
//刪除"disabled"類
div.classList.remove("disabled");
//添加"current"類
div.classList.add("current");
//切換"user"類
div.classList.toggle("user");
//確定元素中是否包含既定的類名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
//執(zhí)行操作
)
//迭代類名
for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}
焦點管理
document.activeElement屬性會引用DOM中當前獲得了焦點的元素，元素獲得焦點的方式有頁面加載、用戶輸入和在代碼中調用focus()方法
var button=document.getElementById("myButton");
button.focus();
alert(document.activeElement===button);//true
默認情況下，文檔剛剛加載完成時，document.activeElement中保存的是document.body元素的引用。文檔加載期間，document.activeElement的值為null
新增document.hasFocus()方法，用于確定文檔時候獲得了焦點
var button=document.getElementById("myButton");
button.focus();
alert(document.hasFocus());//true
HTMLDocument的變化
Document的readyState屬性有兩個可能的值
loading，正在加載的文檔
complete，已經(jīng)加載完的文檔
使用document.readyState的最恰當方式，就是通過它來實現(xiàn)一個指示文檔已經(jīng)加載完成的指示器
if(document.readyState=="complete"){
//執(zhí)行操作
}
document添加了一個名為compatMode的屬性，這個屬性就是為了告訴開發(fā)人員瀏覽器采用了哪種渲染模式。標準模式下，document.compatMode的值等于"CSS1Compat"，而在混雜模式下，document.compatMode的值等于"BackCompat"
if(document.compatMode=="CSS1Compat"){
alert("Standards mode");
}else {
alert("Quirks mode");
}
作為對document.body引用文檔的
元素的補充，HTML5新增了document.head屬性，引用文檔的元素，可以結合使用這個屬性和另一種后備方法
var head=document.head||document.getElementByTagName("head")[0];
字符集屬性
自定義數(shù)據(jù)屬性
可以為元素添加非標準的屬性，但要添加前綴data-
可以通過元素的dataset屬性類訪問自定義屬性的值
//本例中使用的方法僅用于演示
var div = document.getElementById("myDiv");
//取得自定義屬性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//設置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有沒有"myname"值呢？
if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}
插入標記
innerHTML
在讀模式下，innerHTML屬性返回與調用元素的所有子節(jié)點對應的HMTL標記。在寫模式下，innerHTML會根據(jù)指定的值創(chuàng)建新的DOM樹，然后用這個DOM樹完全替換調用元素原先的所有子節(jié)點。
This is a paragraph with a list following it.
//上面元素innerHTML屬性會返回下面的字符串
This is a paragraph with a list following it.
div.innerHTML="Hello & welcome,"reader"! "
//操作之后得到下面的HTML代碼
Hello & welcome, "reader"!
只要使用innerHTML從外部插入HTML，都應該首先以可靠的方式處理HTML，IE8提供了window.toStationHTML()方法，這個方法接收一個參數(shù)，即一個HTML字符串，返回一個經(jīng)過無害處理后的版本，從源HTML中刪除所有腳本節(jié)點和事件處理程序屬性
outerHTML
在讀模式下，outerHTML返回調用它的元素及所有子節(jié)點的HTML標簽。在寫模式下，outerHTML會根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹，然后用這個DOM子樹完全替換調用元素
This is a paragraph with a list following it.
如果調用outerHTML會返回和上面相同的代碼，包括
本身
//設置outerHTML屬性
div.outerHTML="This is a paragraph.
"
insertAdjacentHTML
接收兩個參數(shù)，插入位置和要插入的HTML文辦，第一個參數(shù)必須是下列值之一
beforebegin，在當前元素之前插入一個緊鄰的同輩元素
afterbegin，在當前元素之前插入一個新的子元素或在第一個子元素之前再插入新的子元素
beforeend，在當前元素之下插入一個新的子元素或在最后一個子元素之后再插入新的子元素
afterend，在當前元素之后插入一個緊鄰的同輩元素
//作為前一個同輩元素插入
element.insertAdjacentHTML("beforebegin", "Hello world!
");
//作為第一個子元素插入
element.insertAdjacentHTML("afterbegin", "Hello world!
");
//作為最后一個子元素插入
element.insertAdjacentHTML("beforeend", "Hello world!
");
//作為后一個同輩元素插入
element.insertAdjacentHTML("afterend", "Hello world!
");
scrollIntoView()方法
scrollIntoView()可以在所有HTML元素上調用，通過滾動瀏覽器窗口或某個容器元素，調用元素就可以出現(xiàn)在視口中，如果給這個方法傳入true作為參數(shù)，或者不傳入任何參數(shù)，那么窗口滾動之后會讓調用元素的頂部與視口頂部盡可能平齊，如果傳入false作為參數(shù)，調用元素會盡可能全部出現(xiàn)在視口中
//讓元素可見
document.forms[0]/scrollIntoView();
專有擴展
文檔模式
頁面的文檔模式?jīng)Q定了可以使用什么功能。文檔模式?jīng)Q定了可以使用哪個級別的CSS，可以在JavaScript中使用哪些API，以及如何對待文檔類型
IE5，以混雜模式渲染頁面，IE8以及更高的版本功能無法使用
IE7，以IE7標準模式渲染頁面，IE8以及更高額版本功能無法使用
IE8，以IE8標準模式渲染頁面，IE8的新功能可以使用，IE9新功能無法使用
IE9，以IE9標準模式渲染頁面，IE9新功能都可以使用
如果想讓文檔模式像IE7中一樣，使用以下代碼
如果不考慮文檔類型聲明，直接使用IE7標準模式
children屬性
元素只包含元素子節(jié)點時，兩個屬性的值相同
var childCount=element.children.length;
var firstChild=element.children[0]
contains()方法
調用contain()方法的應該是祖先節(jié)點，也就是搜索開始的節(jié)點，這個方法接收一個參數(shù)，即要檢測的后代節(jié)點。如果被檢測的節(jié)點是后代節(jié)點，該方法返回true，否則返回false
alert(document.documentElement.contain(document.body))//true
使用瀏覽器及能力檢測，寫出通用的contain函數(shù)
function contains(refNode, otherNode){
if (typeof refNode.contains == "function" &&
(!client.engine.webkit || client.engine.webkit >= 522)){
return refNode.contains(otherNode);
} else if (typeof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode) & 16);
} else {
var node = otherNode.parentNode;
do {
if (node === refNode){
return true;
} else {
node = node.parentNode;
}
} while (node !== null);
return false;
}
}
插入文本
innerText
通過這個屬性可以操作元素中包含的所有文本內容，包括子文檔樹中的文本，在通過innerText讀取值時，它會按照由淺入深的順序，將子文檔樹中的所有文本拼接起來，在通過innerText寫入值時，結果會刪除元素的所有子節(jié)點，插入包含相應文本值的文本節(jié)點
This is a paragraph with a list following it.
//對于上面的元素而言，其innerText屬性會返回下列字符串
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
設置這個屬性
div.innerText="Hello world";
//執(zhí)行完之后結果是下方代碼
Hello world!
編寫代碼檢測屬性
function getInnerText(element){
return (typeof element.textContent == "string") ?
element.textContent : element.innerText;
}
function setInnerText(element, text){
if (typeof element.textContent == "string"){
element.textContent = text;
} else {
element.innerText = text;
}
}
outerText
outerText不只是替換它元素的自己誒單，而是會替換整個元素，包括子節(jié)點
滾動
對HTMLElement類型拓展的幾個方法
scrollIntoViewIfNeeded(alignCenter) ：只在當前元素在視口中不可見的情況下，才滾動瀏覽器窗口或容器元素，最終讓它可見。如果當前元素在視口中可見，這個方法什么也不做。如果將可選的 alignCenter 參數(shù)設置為 true ，則表示盡量將元素顯示在視口中部（垂直方向）。Safari 和 Chrome 實現(xiàn)了這個方法。
scrollByLines(lineCount) ：將元素的內容滾動指定的行高， lineCount 值可以是正值，也可以是負值。Safari 和 Chrome 實現(xiàn)了這個方法。
scrollByPages(pageCount) ：將元素的內容滾動指定的頁面高度，具體高度由元素的高度決定。Safari 和 Chrome 實現(xiàn)了這個方法。
//將頁面主體滾動 5 行
document.body.scrollByLines(5);
//在當前元素不可見的時候，讓它進入瀏覽器的視口
document.images[0].scrollIntoViewIfNeeded();
//將頁面主體往回滾動 1 頁
document.body.scrollByPages(-1);
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97830.html
摘要：簡介簡史誕生于年，當時主要負責表單的輸入驗證。實現(xiàn)一個完整的由三部分組成核心文檔對象模型瀏覽器對象模型就是對實現(xiàn)該標準規(guī)定的各個方面內容的語言的描述。把整個頁面映射為一個多層節(jié)點結構。由萬維網(wǎng)聯(lián)盟規(guī)劃。主要目標是映射文檔的結構。
JavaScript簡介
JavaScript簡史
JavaScript誕生于1995年，當時主要負責表單的輸入驗證。
如果沒有表單驗證的功能，填入信息之...
摘要：如果不需要偽元素信息，第二個參數(shù)可以輸操作樣式表類型表示的是樣式表，包括通過元素包含的樣式表和在元素中定義的樣式表表示樣式表是否被禁用的布爾值。包括元素的高度可見的水平滾動條的高度上邊框高度和下邊框高度。顯示處理指令節(jié)點。
DOM2和DOM3
DOM變化
針對XML命名空間的變化
有了XML命名空間，不同XML文檔的元素就可以混合在一起，共同構成格式良好的文檔，而不必擔心發(fā)生命名沖突...
Acceml 2019-08-23 12:01
評論0
摘要：類型對象是的一個實例，表示整個頁面，而且，對象是對象的一個屬性，因此可以將其作為全局對象來訪問。刪除指定位置的行。創(chuàng)建創(chuàng)建創(chuàng)建第一行創(chuàng)建第二行將表格添加到文檔主體中
DOM
節(jié)點層次
Node類型
DOM1級定義了一個Node接口，該接口將由DOM中的所有節(jié)點類型實現(xiàn)
節(jié)點類型由在Node類型中定義的12個數(shù)值常量來表示，任何節(jié)點類型必居其一
Node.ELEMENT_NODE(...
ARGUS 2019-08-23 11:58
評論0
表單腳本
表單的基礎知識
HTMLFormElement有自己獨特的屬性和方法
acceptCharset，服務器能夠處理的字符集，等價于HTML中的accept-charset特性
action，接受請求的URL，等價于HTML中的action特性
elements，表單中所有控件的集合
enctype，請求的編碼類型，等價于HTML中的enctype特性
length，表單中控件的數(shù)量
m...
Tony 2019-08-23 12:04
評論0
摘要：在基于使用命名空間的文檔求值時，需要使用對象。第四個參數(shù)的取值類型是下列常量之一，返回與表達式匹配的數(shù)據(jù)類型。，返回字符串值。這是最常用的結果類型。集合中節(jié)點的次序與它們在文檔中的次序一致。
JavaScript與XML
瀏覽器對XML DOM的支持
DOM2級核心
在通過JavaScript處理XML時，通常只使用參數(shù)root，因為這個參數(shù)指定的是XML DOM文檔元素的標簽名
v...
