bom and dom
bom：Broswer Object Model: 瀏覽器對象模型
- navigator： 獲取客戶機的信息（瀏覽器的信息）
document.write(navigator.appName);
- screen：獲取屏幕的信息
document.write(screen.width + "<br />");
document.write(screen.height);
- location：請求url地址 - href屬性
//獲取當前到請求的url地址
document.write(location.href);
//設置URL地址
function href(){
location.href = "http://www.baidu.com";
}
- history：請求的url的歷史記錄javascript
window：窗口對象，頂層對象（所用的bom對象都是在window裏面操做的）
相關方法：
- window.alert():警告框，顯示內容。簡寫alert()
- confirm():確認框
- var flag = window.confirm("顯示的內容");css
1 //confirm():確認框 2 var flag = window.confirm("是否刪除"); 3 if(flag==true){ 4 alert("刪除成功") 5 }else{ 6 alert("刪除失敗"); 7 }
- prompt()：輸入的對話框
- window.prompt("在顯示的內容","輸入框裏面的默認值");
- window.prompt("please input : ","0");
- open()：打開一個新的窗口
open("打開的新窗口的地址url","","窗口特徵，好比窗口寬度和高度");html
1 function open1(){ 2 window.open("http://jd.com","","width=300,height=200"); 3 }
- close()：關閉窗口(瀏覽器兼容性比較差)
- window.close();java
- 定時器
setInterval("js代碼",毫秒數) 1秒=1000毫秒
clearInterval(): 清除setInterval設置的定時器
node
setTimeout("js代碼",毫秒數)
clearTimeout() : 清除setTimeout設置的定時器數組
dom：Document Object Model：文檔對象模型
- 文檔：超文本文檔（超文本標記文檔） html 、xml
- 對象：提供了屬性和方法
- 模型：使用屬性和方法操做超文本標記型文檔
--可使用js裏面的dom裏面提供的對象，使用這些對象的屬性和方法，對標記型文檔進行操做
如何使用dom解析html？瀏覽器
DOM模型有三種：
DOM level 1：將html文檔封裝成對象。
DOM level 2：在level 1的基礎上添加新的功能，例如：對於事件和css樣式的支持。
DOM level 3：支持xml 1.0的一些新特性。
DHTML：動態HTML，不是一門語言。是不少技術的簡稱。包括
html: 封裝數據
css：使用屬性和屬性值設置樣式
dom：操做html文檔（標記型文檔）
javascript：專門指的是js的語法語句（ECMAScript）
document對象：表示整個文檔
經常使用方法：write()方法
(1)向頁面輸出變量（值）
(2)向頁面輸出html代碼
- var str = "abc";
document.write(str);
document.write("<hr/>");
- getElementById(); 經過id獲得元素（標籤）app
1 <body> 2 <input type="text" id="name" value="大兄逮"/><br /> 3 </body> 4 <script type="text/javascript"> 5 // 使用getElementById獲得input標籤對象 6 var input1 = document.getElementById("name"); 7 // 獲得input標籤具體某元素的值 8 document.write(input1.value); 9 // 向input裏設置一個值value 10 input1.value = "賣掛"; 11 </script>
- getElementsByName();- 經過標籤的name的屬性值獲得標籤
- 返回的是一個集合（數組）dom
1 <body> 2 <input type="text" name="name1" value="text_1"/><br /> 3 <input type="text" name="name1" value="text_2"/><br /> 4 <input type="text" name="name1" value="text_3"/><br /> 5 <input type="text" name="name1" value="text_4"/><br /> 6 </body> 7 <script type="text/javascript"> 8 // getElementsByName獲取input標籤 9 var inputs = document.getElementsByName("name1");// 傳參數是標籤name裏面的值 10 //alert(intputs.length); 11 // 遍歷數組 12 for(var i=0;i<inputs.length;i++){ 13 var input1 = inputs[i]; // 每次循環獲得input對象，賦值到input1 14 alert(input1.value); // 獲得每一個input標籤裏的value 15 } 16 </script>
- getElementsByTagName("標籤名稱");- 經過標籤名稱獲得元素ide
1 <body> 2 <input type="text" value="text_1"/><br /> 3 <input type="text" value="text_2"/><br /> 4 <input type="text" value="text_3"/><br /> 5 </body> 6 <script type="text/javascript"> 7 // 經過getElementsByTagName獲得標籤名 8 var inputs = document.getElementsByTagName("input"); 9 //alert(inputs.length) 10 for(var i = 0;i<inputs.length;i++){ 11 var input1 = inputs[i]; 12 alert(input1.value); 13 } 14 </script>
注：只有一個標籤，這個標籤只能使用name獲取到，這個使用，使用getElementsByName返回的是一個數組，可是如今只有一個元素，這個時候不須要遍歷，而是能夠直接經過數組的下標獲取到值。
1 //經過name獲得input標籤 2 var inputs = document.getElementsByName("name_1")[0]; 3 alert(inputs.value); 4 //經過標籤得到元素 5 var inputs = document.getElementsByTagName("input")[0]; 6 alert(inputs.value);
案例：在末尾添加節點
第一步：獲取到ul標籤：getElementById
第二步：建立li標籤：document.createElement("標籤名稱")方法
第三步：建立文本：document.createTextNode("文本內容");
第四步：把文本添加到li下面：使用 appendChild方法
第五步：把裏添加到ul末尾：使用 appendChild方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>案例 在末尾添加標籤</title> 6 </head> 7 <body> 8 <ul id="ulid"> 9 <li>1111</li> 10 <li>2222</li> 11 <li>3333</li> 12 <li>4444</li> 13 </ul> 14 <br /> 15 <input type="button" value="add" onclick="add()"/> 16 </body> 17 <script type="text/javascript"> 18 // 在末尾添加節點 19 function add(){ 20 // 獲取到ul標籤 21 var ul1 = document.getElementById("ulid"); 22 // 建立標籤 23 var li1 = document.createElement("li"); 24 // 建立文本 25 var text1 = document.createTextNode("newNode"); 26 27 // 文本添加到li下面 28 li1.appendChild(text1); 29 // li加入到ul下面 30 ul1.appendChild(li1); 31 } 32 </script> 33 </html>
元素對象（element對象）
要操做element對象，首先必需要獲取到element，使用document裏面相應的方法獲取。
getAttribute("屬性名稱")：獲取屬性裏面的值
1 // 獲取input標籤 2 var input1 = document.getElementById("inputId"); 3 //alert(input1.value); 4 alert(input1.getAttribute("value"));
setAttribute("name","value")：設置屬性的值
1 var input1 = document.getElementById("inputId"); 2 input1.setAttribute("value","2222"); 3 alert(input1.getAttribute("value"));
removeAttribute("name")：刪除屬性【不能刪除value】
1 var input1 = document.getElementById("inputId"); 2 alert(input1.getAttribute("value"));//默認值:aaa 3 input1.removeAttribute("value"); 4 alert(input1.getAttribute("value"));// null
想要獲取標籤下面的子標籤，使用屬性 childNodes，可是這個屬性兼容性不好。惟一有效辦法，使用getElementsByTagName方法。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Element對象</title> 6 </head> 7 <body> 8 <ul id="ulid"> 9 <li>aaaaaa</li> 10 <li>bbbbbb</li> 11 <li>cccccc</li> 12 </ul> 13 <br /> 14 </body> 15 <script type="text/javascript"> 16 // 獲取ul下面的全部子標籤(子元素) 17 // 獲取ul標籤 18 var ul = document.getElementById("ulid"); 19 // 獲取ul下面的子標籤 20 // var lis = ul.childNodes; 21 // alert(lis.length);//7 22 var lis = ul.getElementsByTagName("li"); 23 alert(lis.length) 24 </script> 25 </html>
Node對象屬性一：nodeName、nodeType、nodeValue
標籤(元素)節點對應的值
- nodeType:返回值1
- nodeName:返回標籤元素的名稱，大寫標籤名稱 好比SPAN
- nodeValue:返回值null
屬性節點對應的值
- nodeType:返回值2
- nodeName:返回這個屬性名稱
- nodeValue:返回這個屬性的值
文本節點對應的值
- nodeType:返回值3
- nodeName:返回一個內容爲#text的字符串
- nodeValue:文本內容
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Node對象屬性</title> 6 </head> 7 <body> 8 <span id="spanid">啊哈哈</span> 9 </body> 10 <script type="text/javascript"> 11 // 獲取span標籤對象 12 var span1 = document.getElementById("spanid"); 13 /* 14 alert(span1.nodeType); // 1 15 alert(span1.nodeName); // SPAN 16 alert(span1.nodeValue); //null 17 */ 18 19 // 獲取屬性節點 20 var id1 = span1.getAttributeNode("id"); 21 /* 22 alert(id1.nodeType); // 2 23 alert(id1.nodeName); // id 屬性名稱 24 alert(id1.nodeValue); // spandid 屬性值 25 */ 26 27 // 獲取文本 28 var text1 = span1.firstChild; 29 alert(text1.nodeType); // 3 30 alert(text1.nodeName); // #text 31 alert(text1.nodeValue); // 文本內容 32 33 </script> 34 </html>
Node對象的屬性二：父節點、子節點、同輩節點
1 <ul id="ulid"> 2 <li id="li1">aaaaaa</li> 3 <li id="li2">bbbbbb</li> 4 </ul>
父節點：parentNode
- ul是li的父節點
子節點
- li是ul的子節點
- childNodes：獲得全部子節點，可是兼容性不好
- firstChild：獲取第一個子節點
- lastChild：獲取最後一個子節點
同輩節點
- li直接關係是同輩節點
- previousSibling：返回一個給定節點的上一個兄弟節點。
- nextSibling: 返回一個給定節點的下一個兄弟節點。
詳情代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ulid"><li id="li1">aaaaaa</li><li id="li2">bbbbbb</li><li id="li3">cccccc</li><li id="li4">dddddd</li></ul> 9 </body> 10 <script type="text/javascript"> 11 /* 12 // 獲取父節點 13 // 獲得li1 14 var li1 = document.getElementById("li1"); 15 // 獲得ul 16 var ul1 = li1.parentNode; 17 alert(ul1.id);//ulid 18 */ 19 20 21 // 獲取ul的第一個子節點 id=li1 22 // 獲得ul 23 var ul1 = document.getElementById("ulid"); 24 // 第一個子節點 25 var li1 = ul1.firstChild; 26 alert(li1.id);//li1 27 28 // 獲得最後一個子節點 29 var li4 = ul1.lastChild; 30 alert(li4.id);//li4 31 32 33 /* 34 // 獲取li的id是li3的上一個和下一個兄弟節點 35 var li3 = document.getElementById("li3"); 36 alert(li3.previousSibling.id);//li2 37 alert(li3.nextSibling.id);//li4 38 */ 39 </script> 40 </html>
注：不一樣瀏覽器存在的不一樣的解析方式，可能由於空格的緣由而致使獲取不到對應的節點，這時候能夠把列表標籤的空格去掉便可。
操做dom樹
appendChild方法：- 添加子節點到末尾
- 特色：相似於剪切黏貼的效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #div1{ 8 width: 200px; 9 height: 150px; 10 border: 2px solid red; 11 } 12 #div2{ 13 width: 250px; 14 height: 150px; 15 border: 5px dashed gray; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div1"> 21 <ul id="ulid1"> 22 <li>tom</li> 23 <li>mary</li> 24 <li>jack</li> 25 </ul> 26 </div> 27 <div id="div2"> 28 29 </div> 30 <input type="button" value="add" onclick="add()" /> 31 </body> 32 <script type="text/javascript"> 33 function add(){ 34 // 獲得div2 35 var div2 = document.getElementById("div2"); 36 // 獲取ul 37 var ul1 = document.getElementById("ulid1"); 38 // 把ul添加到div2裏面 39 div2.appendChild(ul1); 40 } 41 </script> 42 </html>
insertBefore(newNode,oldNode)方法：- 在某個節點以前插入一個新的節點
注：不存在 沒有insertAfter()方法
- 插入一個節點，節點不存在，建立
一、建立標籤
二、建立文本
三、把文本添加到標籤下面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ulid"> 9 <li id="li1">西施</li> 10 <li id="li2">王昭君</li> 11 <li id="li3">貂蟬</li> 12 <li id="li4">楊玉環</li> 13 </ul> 14 <input type="button" value="insert" onclick="insert()" /> 15 </body> 16 <script type="text/javascript"> 17 // 在貂蟬以前添加 <li>董小宛</li> 18 function insert(){ 19 /* 20 * 1.獲取到li3標籤 21 * 2.建立li 22 * 3.建立文本 23 * 4.把文本添加到li下面 24 * 5.獲取到ul 25 * 6.把li添加到ul下面(在貂蟬以前添加 <li>董小宛</li>) 26 */ 27 // 獲取li3標籤 28 var li3 = document.getElementById("li3"); 29 // 建立li 30 var li5 = document.createElement("li"); 31 //建立文本 32 var text1 = document.createTextNode("董小宛"); 33 // 把文本添加到li下面 34 li5.appendChild(text1); 35 // 獲取ul 36 var ul2 = document.getElementById("ulid"); 37 // insertBefore(newNode,oldNode); 38 ul2.insertBefore(li5,li3); 39 } 40 </script> 41 </html>
removeChild方法：刪除節點 -經過父節點刪除，不能本身刪除本身
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ulid"> 9 <li id="li1">西施</li> 10 <li id="li2">王昭君</li> 11 <li id="li3">貂蟬</li> 12 <li id="li4">楊玉環</li> 13 </ul> 14 <input type="button" value="remove" onclick="remove()"/> 15 </body> 16 <script type="text/javascript"> 17 // 刪除末尾節點 18 function remove(){ 19 /** 20 * 1.獲取li4標籤 21 * 2.獲取父節點ul標籤 22 * 3.執行刪除(經過父節點刪除) 23 */ 24 // 獲取li標籤 25 var templi = document.getElementById("li4"); 26 // 獲取父節點 (id方式 parentNode兩種方式獲取) 27 var tempul = document.getElementById("ulid"); 28 // 刪除(經過父節點) 29 tempul.removeChild(li4); // 只能刪一次 30 } 31 </script> 32 </html>
replaceChild(newNode,oldNode)方法: 替換節點
- 不能本身替換本身，經過父節點替換
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ulid"> 9 <li id="li1">紫衫龍王</li> 10 <li id="li2">白眉鷹王</li> 11 <li id="li3">金毛獅王</li> 12 <li id="li4">青翼蝠王</li> 13 </ul> 14 <input type="button" value="replace" onclick="replace()"/> 15 </body> 16 <script type="text/javascript"> 17 // 刪除末尾節點 18 function replace(){ 19 // 替換最後一個爲張無忌 20 /** 21 * 1. 獲取li4 22 * 2. 建立標籤li 23 * 3. 建立文本 24 * 4. 把文本添加到li下面 25 * 5. 獲取ul標籤 26 * 6. 執行替換操做 27 */ 28 // 獲取li4標籤 29 var tempLi4 = document.getElementById("li4"); 30 // 建立li標籤 31 var tempLi5 = document.createElement("li"); 32 // 建立文本 33 var tempText = document.createTextNode("張無忌"); 34 // 文本添加到li下面 35 tempLi5.appendChild(tempText); 36 // 獲取ul標籤 37 var tempNode = document.getElementById("ulid"); 38 // 替換節點 39 tempNode.replaceChild(tempLi5,tempLi4); 40 } 41 </script> 42 </html>
cloneNode(boolean): 複製節點
- //把ul列表複製到另一個div裏面
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <ul id="ulid"> 9 <li id="li1">紫衫龍王</li> 10 <li id="li2">白眉鷹王</li> 11 <li id="li3">金毛獅王</li> 12 <li id="li4">青翼蝠王</li> 13 </ul> 14 <div id="divv"> 15 <!--被複制的內容放在這個div裏--> 16 </div> 17 18 <input type="button" value="copy" onclick="copy()"/> 19 </body> 20 <script type="text/javascript"> 21 function copy(){ 22 // 把ul列表複製到另外一個div裏面 23 /* 24 * 一、獲取帶ul 25 * 二、執行復制方法cloneNode複製true 26 * 三、把複製以後的內容放到div裏面去 27 * 獲取到div 28 * appendChild 29 */ 30 // 獲取ul 31 var ulid = document.getElementById("ulid"); 32 // 複製ul，放到相似剪切板裏面 33 var ulcopy = ulid.cloneNode(true) 34 // 獲取到div 35 var divv = document.getElementById("divv"); 36 // 把副本放到divv裏去 37 divv.appendChild(ulcopy); 38 } 39 </script> 40 </html>
操做dom總結
獲取節點使用方法
- getElementById()：經過節點的id屬性，查找對應節點。
- getElementsByName()：經過節點的name屬性，查找對應節點。
- getElementsByTagName()：經過節點名稱，查找對應節點
插入節點的方法
- insertBefore方法：在某個節點以前插入
- appendChild方法：在末尾添加，剪切黏貼
刪除節點方法
- removeChild方法：經過父節點刪除
替換節點方法
- replaceChild方法：經過父節點替換
- 1. DOM and BOM
- 2. DOM&BOM
- 3. BOM&DOM
- 4. BOM，DOM
- 5. BOM$DOM
- 6. BOM+DOM
- 7. BOM DOM
- 8. BOM,DOM
- 9. BOM & DOM
- 10. DOM & BOM
- 更多相關文章...
- • W3C RDF and OWL 活動 - W3C 教程
- • XSL-FO table-and-caption 對象 - XSL-FO 教程
- • RxJava操作符（七）Conditional and Boolean
- • 算法總結-股票買賣
-
每一个你不满意的现在，都有一个你没有努力的曾经。