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