94_JavaWeb_JS2_event_dom_方法_屬性

JavaScript 事 件 : 輸入設備與頁面進行交互的響應

常用的事件：

onload 加載完成事件： 頁面加載完成之后，常用于做頁面 js 代碼初始化操作

onclick 單擊事件： 常用于按鈕的點擊響應操作。

onblur 失去焦點事件： 常用用于輸入框失去焦點后驗證其輸入內容是否合法。

onchange 內容發生改變事件： 常用于下拉列表和輸入框內容發生改變后操作

onsubmit 表單提交事件： 常用于表單提交前，驗證所有表單項是否合法

事件的注冊（綁定）

當事件響應后要執行哪些操作代碼，叫事件注冊或事件綁定。

靜態注冊事件：通過 html 標簽的事件屬性直接賦于事件響應后的代碼。

動態注冊事件：是指先通過 js 代碼得到標簽的 dom 對象，然后再通過 dom 對象.事件名 = function(){} 這種形式賦于事件響應后的代碼

動態注冊基本步驟：

1、獲取標簽對象

2、標簽對象.事件名 = fucntion(){}

按鈕_靜態點擊 按鈕_動態點擊

用戶名:
密碼:


--國家-- 意大利 英國 日本

伴娘 姐夫 B哥 李心

GET請求的特點是： 1、瀏覽器地址欄中的地址是：action屬性[+?+請求參數] 請求參數的格式是：name=value&name=value 2、不安全 3、它有數據長度的限制 POST請求的特點是： 1、瀏覽器地址欄中只有action屬性值 2、相對于GET請求要安全 3、理論上沒有數據長度的限制

onsubmit

DOM 模型 ?Document Object Model 文檔對象模型

把文檔中的標簽，屬性，文本，轉換成為對象來管理

Document 對象的理解： 第一點：Document 它管理了所有的 HTML 文檔內容 第二點：document 它是一種樹結構的文檔，有層級關系 第三點：它讓我們把所有的標簽 都 對象化 第四點：我們可以通過 document 訪問所有的標簽對象 方法介紹 document.getElementById(elementId) 通過標簽的id屬性查找標簽 dom 對象,elementId 是標簽的id屬性值 document.getElementsByName(elementName)通過標簽的name屬性查找標簽dom對象,elementName標簽的name屬性值 document.getElementsByTagName(tagname) 通過標簽名查找標簽dom對象,tagname 是標簽名 document.createElement( tagName)方法，通過給定的標簽名，創建一個標簽對象,tagName 是要創建的標簽 注： document 對象的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢 如果沒有 id 屬性，則優先使用getElementsByName方法來進行查詢 如果id屬性和name屬性都沒有最后再按標簽名查 getElementsByTagName 以上三個方法，一定要在頁面加載完成之后執行，才能查詢到標簽對象

正則

getElementById

用戶名： 較驗

getElementByName

興趣愛好： C++ Java JavaScript
全選 全不選 反選

getElementByTagName

興趣愛好： C++ Java JavaScript
全選

節點的常用屬性和方法

方法

getElementsByTagName()方法 獲取當前節點的指定標簽名孩子節點

appendChild( oChildNode )方法，可以添加一個子節點，oChildNode

屬性

childNodes屬性，獲取當前節點的所有子節點

firstChild屬性，獲取當前節點的第一個子節點

lastChild屬性，獲取當前節點的最后一個子節點

parentNode屬性，獲取當前節點的父節點

nextSibling屬性，獲取當前節點的下一個節點

previousSibling屬性，獲取當前節點的上一個節點

className 用于獲取或設置標簽的 class 屬性值

innerHTML屬性，表示獲取/設置起始標簽和結束標簽中的內容

innerText屬性，表示獲取/設置起始標簽和結束標簽中的文本

@CHARSET "UTF-8"; body { width: 800px; margin-left: auto; margin-right: auto; } button { width: 300px; margin-bottom: 10px; } #btnList { float:left; } #total{ width: 450px; float:left; } ul{ list-style-type: none; margin: 0px; padding: 0px; } .inner li{ border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float:left; } .inner{ width:400px; border-style: solid; border-width: 1px; margin-bottom: 10px; padding: 10px; float: left; }

HTML Java web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。