JavaScript的對象/下
JavaScript的對象
一、BOM對象
BOM----browser object model
1、window對象
所有瀏覽器都支持window對象。
概念上講，一個html文檔對應一個window對象。
功能上講：控制瀏覽器窗口的。
使用上講：window對象不需要創建對象，直接使用即可。
2、widow對象方法
alert() 顯示帶有一段信息和一個確認按鈕的警告框 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() 關閉瀏覽器窗口 setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。 clearInterval() 取消由 setInterval()設置的timeout。
3、 方法使用
3.1
1、//alert //顯示帶有一段消息和一個確認按鈕的警告框 window.alert("hello"); //confirm() // 有一個返回值 確認是true 取消是false var ret= window.confirm("num"); console.log(ret) // prompt() 有一個返回值 具體的一個值 顯示可提示用戶輸入的對話框 var ret1=window.prompt(100); // console.log(ret1) //open()函數 打開新的網頁 // open("http://www.baidu.com","new"View Code,"height=200,width=200,resizable=no")
3.2 setInterval ，clearInterval
setInterval()方法會不停地調用函數，直到clearInterval()被調用或窗口被關閉。由setInterval()返回的ID值可用作clearInterval()方法的參數。
語法：<br> setInterval(code,millisec) 其中，code為要調用的函數或要執行的代碼串。millisec周期性執行或調用 code 之間的時間間隔，以毫秒計。
function foo() {
// console.log("ok")
// }
// setInterval(foo,5000); //隔5分鐘再執行foo
示例：
<!--<input type="text" id="timer" onfocus="start()" > -->觸發事件 <!--<button onclick="stop()">end</button>--> 獲取光標事件 <script> var ID; function start() { if(ID==undefined){ bar(); ID=setInterval(bar,1000) } } function bar() { var s_time=new Date(); //獲取當前時間 var times=s_time.toLocaleString(); //轉換時間格式 var ret=document.getElementById("timer"); //根據屬性找對象 ret.value=times; //然後對其value賦值 console.log(ret) } function stop() { clearInterval(ID); ID==undefined; } </script>View Code
二、DOM對象
2.1 什麽是HTML DOM
HTML Document Object Model（文檔對象模型）
HTML DOM定義了訪問和操作HTML文檔的標準方法
HTML DOM把HTML 文檔呈現現為帶有元素、屬性和文本的數結構（節點樹）
2.2 DOM樹
畫dom樹是為了展示文檔中各個對象之間的關系，用於對象的導航。
2.3 DOM節點
2.3.1 節點類型
HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
整個文檔是一個文檔節點
每個 HTML 標簽是一個元素節點
包含在 HTML 元素中的文本是文本節點
每一個 HTML 屬性是一個屬性節點
其中，document與element節點是重點。
2.3.2 節點關系
節點樹中的節點彼此擁有層級關系。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素。
2.3.3 節點查找
直接查找節點 （局部查找）
document.getElementById(“idname”) document.getElementsByTagName(“tagname”) document.getElementsByName(“name”) document.getElementsByClassName(“name”)
<div> <p>hello</p> <div class="c1"> <div class="c2">c2222</div> <p>c1---ppp</p> <a href="" id="ID1">C22222</a> </div> <script> // var ret =document.getElementsByClassName("c1"); 按照class尋找節點 標簽 // console.log(ret[0]) // var ret1=document.getElementsByTagName("p"); 按照標簽名找 // console.log(ret1[0]); // console.log(ret1[1]); // var ret3=document.getElementById("ID1"); 按照id找 // console.log(ret3) </script>局部查找
2.3.4 導航節點屬性
‘‘‘ parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最後一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素 ‘‘‘
2.4 節點操作
2.4.1 創建節點：
createElement(標簽名)：創建一個指定名稱的元素。 例如：// var tag=document.activeElement("input"); // tag.setAttribute("type","text");
2.4.2 添加節點：
追加一個子節點（作為最後的子節點）父節點添加子節點才能調用append
somenode.appendChild(newnode)
把增加的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);
2.4.3 替換節點：
somenode.replaceChild(newnode, 某個節點);
<body> <h1>111</h1> <p>111</p> <div class="img"></div> <button onclick="foo()">add</button> <button onclick="bar()">del</button> <script> function bar() { var con=document.getElementsByClassName("img")[0]; ele_h1=con.getElementsByTagName("h1")[0]; con.removeChild(ele_h1); } function foo() { //創建標簽對象 var ele=document.createElement("img"); //創建一個節點 //為標簽賦值屬性 // ele.setAttribute("src","top.jpg"); //原生態 ele.src="top.jpg"; //DHTML 動態 推薦 console.log(ele); //父標簽添加子標簽 var con=document.getElementsByClassName("img")[0]; // con.appendChild(ele); } </script> </body>View Code
2.5 節點屬性操作
1、 獲取文本節點的值：innerText innerHTML（裏面有標簽頁會給獲取出來）
2、 attribute操作
elementNode.setAttribute(name,value) elementNode.getAttribute(屬性名) <-------------->elementNode.屬性名(DHTML) elementNode.removeAttribute(“屬性名”);
修改標簽屬性：
3、 value獲取當前選中的value值
1.input
2.select （selectedIndex）
3.textarea
4、 innerHTML給節點添加html代碼
該方法不是完w3c的標準，但是主瀏覽器支持
tag.innerHTML=“<p>要顯示內容<p>”;
5、關於class的操作；
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6、改變css樣式：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
.style.fontSize=48px
三、 DOM Event（事件）
3.1 事件類型
onclick 當用戶點擊某個對象時調用的事件句柄。
ondblclick 當用戶雙擊某個對象時調用的事件句柄。
onfocus 元素獲得焦點。 練習：輸入框
onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證.
onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動）
3.2 綁定事件方式
方式1： <div id="div" onclick="foo(this)">點我呀</div> <script> function foo(self){ // 形參不能是this; console.log("點你大爺!"); console.log(self); } </script> 方式2： <p id="abc">試一試!</p> <script> var ele=document.getElementById("abc"); ele.onclick=function(){ console.log("ok"); console.log(this); // this直接用 }; </script>View Code
JavaScript的對象/下