慕課網JavaScript進階篇第9章學習筆記
JavaScript學習筆記（一）
JavaScript學習筆記（二）
JavaScript學習筆記（三）
JavaScript學習筆記（四）
DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
DOM節點層次圖：
HTML文檔可以說是由節點構成的集合，DOM節點有：
- 元素節點：上圖中
<html>、<body>、<p>等都是元素節點，即標簽 - 文本節點：向用戶展示的內容
- 屬性節點：元素屬性，如
<a>標簽的鏈接屬性
節點屬性：
| 方法 | 說明 |
|---|---|
| nodeName | 返回一個字符串，其內容是給定節點的名字 |
| nodeType | 返回一個整數，這個數值代表給定節點的類型 |
| nodeValue | 返回給定節點的當前值 |
遍歷節點樹：
| 方法 | 說明 |
|---|---|
| childNodes | 返回一個數組，該數組由給定元素節點的子節點構成 |
| firstChild | 返回第一個子節點 |
| lastChild | 返回最后一個子節點 |
| parentNode | 返回一個給定節點的父節點 |
| nextSibling | 返回給定節點的下一個子節點 |
| previousSibling | 返回給定節點的上一個子節點 |
DOM操作：
| 方法 | 說明（前兩個是document方法） |
|---|---|
| createElement(element) | 創建一個新的元素節點 |
| createTextNode() | 創建一個包含著給定文本的新文本節點 |
| appendChild() | 指定節點的最后一個子節點列表之后添加一個新的子節點 |
| insertBefore() | 將一個給定節點插入到一個給定元素節點的給定子節點的前面 |
| removeChild() | 從一個給定元素中刪除一個子節點 |
| replaceChild() | 把一個給定父元素里的一個子節點替換為另一個節點 |
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使網頁顯示動態效果并實現與用戶交互功能。</p>
<script type="text/javascript">
var test = document.getElementById("con");
test.style.color = "red";
test.style.backgroundColor = "#CCC";
test.style.display = "none";
</script>
getElementByName()&getElementsByTagName()
getElementByName()，返回帶有指定名稱的節點對象的集合（數組，和數組類似有length）
語法： document.getElementByName(name);
getElementsByTagName，返回帶有指定標簽名的節點對象的集合（數組），返回元素的順序是它們在文檔中的順序
語法： document.getElementsByTagName(標簽名)
示例部分代碼：可看完整示例
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for (var i=0; i<hobby.length; i++){
if(hobby[i].type == "checkbox"){
hobby[i].checked = true;
}
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for (var j=0; j<hobby.length; j++){
hobby[j].checked = false;
}
}
function checkone(){
var j=document.getElementById("wb").value;
var hobby = document.getElementsByTagName("input");
if(j>=1&&j<=6){
hobby[j-1].checked = true;
}else{
alert("請輸入1——6之間的數字");
}
}
</script>
getAttribute()&setAttribute()
getAttribute()，通過元素節點的屬性名稱獲取屬性的值
語法： elementNode.getAttribute(name)
- elementNode:使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點
- name:要想查詢的元素節點的屬性名字
示例：
<p id="intro">課程列表</p>
<ul>
<li title1="第1個li">HTML</li>
<li>CSS</li>
<li title="第3個li">JavaScript</li>
<li title="第4個li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下為獲取的不為空的li標簽title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text = con[i].getAttribute("title");//text獲取的是title的key值
var text1 = con[i].title;//text1獲取的是title本身
//if(text!=null)
document.write(text+"<br>");
}
</script>
text結果：
第1個li
null
第3個li
第4個li
null
//如果第二個li為'<li title = "">'，會顯示空行
text1結果：
第1個li
第3個li
第4個li
//這里還有個空行
setAttribute()，增加一個指定名稱和值得新屬性，或者把一個現有的屬性設定為指定的值
語法： elementNode.setAttribute(name, value)
- name：要設置的屬性名； value：要設置的屬性值
- 把指定屬性設置為指定值，若屬性不存在，將創建一個新屬性
示例：
<ul>
<li title="JS">JavaScript</li>
<li title="JQ">JQuery</li>
<li title="">HTML/CSS</li>
<li title="JAVA">JAVA</li>
<li title="">PHP</li>
</ul>
<p>以下為li列表title的值,當title為空時，新設置值為"WEB前端技術":</p>
<script type="text/javascript">
var Lists=document.getElementsByTagName("li");
for (var i=0; i<Lists.length;i++){
//document.write(Lists[i].innerHTML+"<br>")
var text = Lists[i].getAttribute("title");
if(text != "")
document.write(text +"<br>");//這樣會避免為原來title=""賦CSS后出現的空行問題
else{
Lists[i].setAttribute("title", "CSS");
document.write(Lists[i].getAttribute("title")+"<br>");
}
}
</script>
節點屬性
在DOM中，每個節點都是一個對象。DOM節點有三個重要的屬性：
-
nodeName：節點的名稱，只讀
- 元素節點的nodeName與標簽名相同
- 屬性節點的nodeName是屬性的名稱
- 文本節點的nodeName永遠是#text
- 文檔節點的nodeName永遠是#document
-
nodeValue：節點的值
- 元素節點的nodeValue是undefined或null
- 文本節點的nodeValue是文本自身
- 屬性節點的nodeValue是屬性的值
-
nodeType：節點類型，只讀
- 元素：節點類型為 1
- 屬性：節點類型為 2
- 文本：節點類型為 3
- 注釋：節點類型為 8
- 文檔：節點類型為 9
訪問子節點childNodes
訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，具有length屬性
語法： elementNode.childNodes
如果選定的節點沒有子節點，則該屬性返回不包含節點的Nodelist
示例1：
<ul>
<li>javascript</li>
<li>jQuery</li>
<li>PHP</li>
</ul>
<script type = "text/javascript">
var x = document.getElementsByTagName("ul")[0].childNodes;//加[0]代表僅選擇第一個出現的<ul>
document.write("UL子節點個數：" + x.length + ";");
document.write("節點類型：" + x[0].nodeType);
</script>
運行結果IE: UL子節點個數：3；節點類型：1
其他瀏覽器： UL子節點個數：7；節點類型：3
空白節點（文本節點）：
<ul>空白節點
<li>javascript</li>空白節點
<li>jQuery</li>空白節點
<li>PHP</li>空白節點
</ul>
示例2：
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div")[0].childNodes;
for(var i=0;i<x.length;i++)
{
document.write("第"+(i+1)+"個節點"+"<br/>"+"節點名："+node[i].nodeName+"<br/>"+"節點類型："+node[i].nodeType+"<br/>"+"節點值："+node[i].nodeValue+"<br/>"+"<br/>")
}
</script>
輸出結果：
第1個節點的值是： javascript
第1個節點的名稱是：#text
第1個節點的屬性是：3
第2個節點的值是：null
第2個節點的名稱是：P
第2個節點的屬性是：1
第3個節點的值是：
第3個節點的名稱是：#text
第3個節點的屬性是：3
第4個節點的值是：null
第4個節點的名稱是：DIV
第4個節點的屬性是：1
第5個節點同第3個
第6個節點的值是：null
第6個節點的名稱是：H5
第6個節點的屬性是：1
第7個節點同第3個
訪問子節點的第一和最后項
firstChild 返回'childNodes'數組的第一個子節點，如果選定的節點沒有子節點，返回NULL
語法：node.firstChild //與elementNode.childNodes[0]是同樣效果
lastChild 返回...
語法：node.lastChild
訪問父節點
語法：elementNode.parentNode //父節點只能有一個
祖節點：elementNode.parentNode.parentNode
訪問兄弟節點nextSibling
nextSibling返回某個節點之后緊跟的節點（處于同一樹層級中）
語法：nodeObject.nextSibling //無此節點，返回null
previousSibling返回...
語法：nodeObject.previousSibling //無此節點，返回null
注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。
解決問題方法:
判斷x節點nodeType是否為1，若是為元素節點，若不是，x = x.nextSibling;
示例：
function get_nextSibling(n){
var x=n.nextSibling;
while (x && x.nodeType!=1){//x存在且不是元素節點
x=x.nextSibling;
}
return x;
}
var x=document.getElementsByTagName("li")[0];
document.write(x.nodeName);
document.write(" = ");
document.write(x.innerHTML);
var y=get_nextSibling(x);
if(y!=null){
document.write("<br />nextsibling: ");
document.write(y.nodeName);
document.write(" = ");
document.write(y.innerHTML+"<br />");
}else{
document.write("<br>已經是最后一個節點");
}
插入節點appendChild()
在指定節點的最后一個子節點列表之后添加一個新的子節點。
語法：appendChild(newnode)
示例：
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type = "text/javascript">
var otest = document.getElementById("test");
var newnode = document.createElement("li");
newnode.innerHTML = "PHP";
otest.appendChild(newnode);
</script>
插入節點insertBefore()
在已有的子節點前插入一個新的子節點
語法：insertBefore(newnode, node)
示例：
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var node = document.getElementsByTagName("li")[1];
var newnode = document.createElement("li");
newnode.innerHTML = "php";
otest.insertBefore(newnode, node);
</script>
removeChild()
從子節點列表中刪除指定節點
<div id = "div1"><h1>HTML</h1><h2>javascript</h2></div>
<script type = "text/javascript">
var otest = document.getElementById("div1");
var x = otest.removeChild(otest.childNodes[1]);
document.write("刪除節點的內容："+x.innerHTML)；
</script>
替換元素節點replaceChild()
<div><b id="oldnode">JavaScript</b>是一個很常用的技術，為網頁添加動態效果。</div>
<a href="javascript:replaceMessage()"> 將加粗改為斜體</a>
<script type="text/javascript">
function replaceMessage(){
var newnode = document.createElement("i");
var newnodeText = document.createTextNode("JjavaScript");
newnode.appendChild(newnodeText);
var oldNode = document.getElementById("oldnode");
oldNode.parentNode.replaceChild(newnode, oldNode);
}
</script>
創建元素節點createElement()
如前邊所示：
var newnode = document.createElement("li");
var newnode = document.createElement("i");
創建文本節點createTextNode()
.message{
width:200px;
height:100px;
background-color:#CCC;}
...
var element = document.createElement("p");
element.className = "message";
var textNode = document.createTextNode("I love JavaScript");
element.appendChild(textNode);
document.body.appendChild(element);
瀏覽器窗口可視區域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法：
對于IE9+、Chrome、Firefox、Opera、Safari:
window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度
對于IE9-：
document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。
document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。
或者
Document對象的body屬性對應HTML文檔的<body>標簽
document.body.clientHeight
document.body.clientWidth
在不同瀏覽器都實用：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
網頁尺寸
scrollHeight和scrollWidth，獲取網頁內容高度和寬度，scrollHeight是網頁內容高度，最小值是clientHeight（網頁內容實際高度小于clientHeight時，sH返回cH）
瀏覽器兼容性：
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
scrollHeight和scrollWidth還可獲取Dom元素中內容實際占用的高度和寬度。
網頁尺寸
offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
值
offsetHeight = clientHeight + 滾動條 + 邊框。
瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
網頁卷去的距離與偏移量
scrollLeft:設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。
scrollTop:設置或獲取位于對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置 。
offsetTop:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 。
