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的對象/下