首頁 > 開發者 > JavaScript
標籤：不能 png 間隔 dht bsp classlist object add lis
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 取消是falsevar ret= window.confirm("num");console.log(ret)// prompt() 有一個傳回值 具體的一個值 顯示可提示使用者輸入的對話方塊var ret1=window.prompt(100);// console.log(ret1)//open()函數 開啟新的網頁// open("http://www.baidu.com","new","height=200,width=200,resizable=no")View Code
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">Helloworld!</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的對象/下
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
