javascript的DOM對象終極總結：你必看的j

javascript的DOM對象終極總結：你必看的js面向對象

《大數據和人工智能交流》頭條號向廣大初學者新增C 、Java 、Python 、Scala、javascript 等目前流行的計算機、大數據編程語言，希望大家以后關注本頭條號更多的內容。作者：軟件設計師天涯雨。

（一）javascript的DOM對象總結：輕松使用原生態js開發特效-1

一、創建文本

【1】方法1

1.創建文本對象

var textNode=document.createTextNode("創建了一個文本節點");

2.獲取 div對象

var divNode=document.getElementById("div_1");

3.將文本節點添加到div節點中

divNode.appendChild(textNode);

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

//1、.創建文本對象

var txt=document.createTextNode("Hello")

//2、獲得div對象

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

//3、將文本節點添加到區域對象中

divObj.appendChild(txt);

}

</script>

【2】方法2：使用innerHTML屬性

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

divObj.innerHTML="hello";

}

</script>

二、創建控件

【1】方法1：

1.創建一個按鈕節點

var buttonNode=document.createElement("input");

buttonNode.type="button";

buttonNode.value="新按鈕";

2.獲取 div節點

var divNode=document.getElementById("div_1");

3.將文本節點添加到div節點中

divNode.appendChild(buttonNode);

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

//1、創建一個按鈕節點

var node=document.createElement("input");

node.type="button";

node.value="確定";

//2、獲取區域對象

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

//3、將控件對象加入區域對象

divObj.appendChild(node);

}

</script>

【2】方法2：

<style>

.c01{

width:200px;

height:200px;

border:5px blue solid;

}

</style>

</div>

function show()

{

//2、獲取區域對象

var objs=document.getElementsByTagName("div");

var divObj=objs[0];

divObj.innerHTML="<input type='button' value='ok'>";

}

</script>

三、創建select控件的option節點

1、獲得select控件對象

var selectObj=document.getElementById("selectId");

2、創建option子節點：語法 new Option("文本值","控件值")

var optionObj=new Option("北京","010");

3、將option選項添加到控件select對象中

selectObj.options.add(optionObj);

示例1：

</select>

function show()

{

//1、獲得select控件對象

var selObj=document.getElementById("s001");

//2、創建option子節點

var optObj=new Option("北京","010");

//3、將option選項添加到控件select對象中

selObj.options.add(optObj);

}

</script>

示例2：

</select>

function show()

{

var arr=["北京","上海","天津"];

//1、獲得select控件對象

var selObj=document.getElementById("s001");

selObj.length=1;

//2、創建option子節點

for(var i=0;i<arr.length;i++)

{

var optObj=new Option(arr[i],i);

//3、將option選項添加到控件select對象中

selObj.options.add(optObj);

}

</script>

/////////////////////////////////////////////表格節點的操作（***）/////////////////////////////////////////////////////

四、創建表格

【1】、創建表格方法1

1、我們通過通過createElement創建元素形式來完成

(1)創建表格節點

var tableNode=document.createElement("table");

(2)創建tBody節點

var tbodyNode=document.createElement("tbody");

(3)創建tr節點

var trNode=document.createElement("tr");

(4)創建td節點

var tdNode=document.createElement("td");

tdNode.innerHTML="這是單元格";

2.關聯這些節點，進行指定層次節點的添加

trNode.appendChild(tdNode);

tbodyNode.appendChild(trNode);

tableNode.appendChild(tbodyNode);

document.getElementsByTagName('div')[0].appendChild(tableNode);

例如：

<html>

<head>

<style>

table{

border:blue 1px solid;

width:800px;

border-collapse:collapse;

}

table td{

border:blue 1px solid;

padding:5px;

}

</style>

</head>

<body>

<hr/>

<div>

</div>

</body>

</html>

//通過createElement創建元素形式來完成

function createTable()

{

//1.創建節點

//(1)創建表格節點

var tableNode=document.createElement("table");

//(2)創建tBody節點

var tbodyNode=document.createElement("tbody");

//(3)創建tr節點

var trNode=document.createElement("tr");

//(4)創建td節點

var tdNode=document.createElement("td");

tdNode.innerHTML="這是單元格";

//2.關聯這些節點，進行指定層次節點的添加

trNode.appendChild(tdNode);

tbodyNode.appendChild(trNode);

tableNode.appendChild(tbodyNode);

document.getElementsByTagName('div')[0].appendChild(tableNode);

}

</script>

【2】創建表格方式2

通過table對象來完成

(1)創建表格對象

var tableNode=document.createElement("table");

(2)創建tr對象

var trNode=tableNode.insertRow();

(3)創建td節點

var tdNode=trNode.insertCell();

關聯這些節點，進行指定層次節點的添加

document.getElementsByTagName('div')[0].appendChild(tableNode);

例子1：

<html>

<head>

<style>

table{

border:blue 1px solid;

width:800px;

border-collapse:collapse;

}

table td{

border:blue 1px solid;

padding:5px;

}

</style>

</head>

<body>

<hr/>

<div>

</div>

</body>

</html>

//通過table對象來完成

function createTable2()

{

//1.創建節點

//(1)創建表格節點

var tableNode=document.createElement("table");

//(2)創建tr節點

var trNode=tableNode.insertRow();

//(3)創建td節點

var tdNode=trNode.insertCell();

tdNode.innerHTML="Hello World";

//2.關聯這些節點，進行指定層次節點的添加

document.getElementsByTagName('div')[0].appendChild(tableNode);

document.getElementsByName("createButton")[0].disabled=true;

}

</script>

例子2：創建多行多列的代碼為

function createTable2()

{

//1.創建節點

//(1)創建表格節點

var tableNode=document.createElement("table");

for(var i=1;i<=6;i++)

{

//(2)創建tr節點

var trNode=tableNode.insertRow();

for(var j=1;j<=6;j++)

{

//(3)創建td節點

var tdNode=trNode.insertCell();

tdNode.innerHTML=i+"--"+j;

}

//2.關聯這些節點，進行指定層次節點的添加

document.getElementsByTagName('div')[0].appendChild(tableNode);

document.getElementsByName("createButton")[0].disabled=true;

}

五、刪除表格

deleteRow()函數可以帶參數，形式如下：deleteRow(index)：index從0開始和上面兩個方法差不多的意思，就是刪除指定位置的行和單元格

【1】通過行的對象刪除

</table>

<br>

function deleteRow()

{

//1、獲取表格對象

var tableNode=document.getElementById("tableId");

//2、獲得行的對象

var row=document.getElementById("trid2");

//3、獲取改行的索引

var index=row.rowIndex;

//4、從表格對象中將該行刪除

tableNode.deleteRow(index);

}

</script>

另外也可以通過document.getElementById("行的Id").removeNode();來進行刪除

【2】循環刪除表格的行

</table>

<br>

function deleteRow()

{

var tableNode=document.getElementById("tableId");

//tableNode.deleteRow(1);

var length=tableNode.rows.length;

for( var i=1; i<length; i++ )

{

tableNode.deleteRow(i);

}

</script>

【3】刪除列deleteCell

這里涉及表格2個重要集合（注意是集合）

1、rows:獲取來自于 table 對象的 tr (表格行)對象的集合

2、cells:獲取表格行或整個表格中所有單元格的集合

例如：

（1）

//1、獲取表格對象

var tableNode=document.getElementById("tableId");

//2、獲得行對象的數組，那么數組每個元素是個行對象

var arr=tableNode.rows;

//3、刪除第3行第3列

arr[2].deleteCell(2);

（2）計算第1行有多少列

var len=tableNode.rows[0].cells.length ;

alert(len);

（3）計算一共有多少行

var len=tableNode.rows.length ;

alert(len);

例如：

//刪除列，其實就是在刪除每一行中同一位置的單元格

function delCol()

{

//獲取表格對象

var tableNode=document.getElementById("tableid");

if(tableNode==null)

{

alert("表格不存在");

return;

}

var colnum=document.getElementsByName("delcol")[0].value;

if(colnum>=1 && colnum<=tableNode.rows[0].cells.length)

{

for(var i=0;i<tableNode.rows.length;i++)

{

tableNode.rows[i].deleteCell(colnum-1);

}

else

{

alert("列不存在");

}

六、動態設置單元格與行的屬性

【1】方法1：setAttribute(屬性，屬性值)

</table>

<br>

function setAtt()

{

//1、獲取表格對象

var objMyTable=document.getElementById("tableId");

objMyTable.setAttribute("border",5);//為表格設置邊框為1

//為TD設置高度

var objCell=document.getElementById("cell333");

objCell.setAttribute("height",50);//為單元格設置高度為50

}

</script>

【2】方法2：獲得對象的屬性，然后直接賦值，此方法以前講過

var objMyTable=document.getElementById("tableId");

objMyTable.border=5;//為表格設置邊框為5

（二）javascript的DOM對象總結：輕松使用原生態js開發特效-2

1、行對象的集合

《愛讀書系列》，本人會把技術學習中閱讀過的書籍通過筆記和總結的方式與粉絲分享，此系列是在原著基礎上
收錄和總結而來，希望大家得到更多的支持。

書簡介

書名為《輕量級JavaEE企業應用實戰》，是本人在學習JavaEE框架的時候閱讀的第一本書，本書對于框架及相關基礎知識講述的比較詳細和淺顯，適合初學者和需要全面了解JavaEE知識的人群。

本文內容為第二章的第1部分內容

WEB應用和web.xml

1.構建WEB應用

使用IDE創建項目？當然可以。但我們今天來學學不用IDE如何創建一個WEB應用。步驟如下：

（1）在任意目錄下新建一個文件夾作為應用根目錄，筆者以webDemo文件夾建立一個web應用

（2）在應用根目錄下創建一個WEB-INF文件夾（區分大小寫）

（3）進入Tomcat中找到任何一個默認WEB應用，將其WEB-INF下的web.xml文件復制到自己所創建的對應文件夾下

（4）配置web.xml文件（PS：相關配置我會另寫文章講解）

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1" metadata-complete="true">
</web-app>

（5）在WEB-INF目錄下，新建兩個文件夾：classes和lib，這兩個文件夾都是用于保存WEB應用所需的Java類文件，區別是classes保存單個class文件；lib保存打包后的JAR文件

（6）現已建立了一個空WEB應用。將該應用復制到Tomcat的webapps路徑下

（7）將JSP文件放在WEB應用的根路徑下，就可以通過瀏覽器來訪問這些頁面了，URL路徑：http://localhost:port/webDemo/*.jsp

如上所述，WEB應用的目錄結構如下：
<webDemo>
|--WEB-INF
|			|--classes
|			|--lib
|			|--web.xml
|--*.jsp

2.配置描述符web.xml

web.xml文件被稱為配置描述符，在Servlet2.5之前，WEB應用必須包含一個web.xml文件，且必須放在WEB-INF路徑下。WEB-INF是個特殊的文件夾，WEB容器會包含該文件夾下的內容，但瀏覽器無法訪問WEB-INF下的任何內容。

PS:對于Servlet3.0規范而言，web.xml不再是必須的，但通常還是建議保留

web.xml可以實現如下的所有配置功能：

（1）配置JSP

（2）配置Servlet

（3）配置Listener

（4）配置Filter

（5）配置標簽庫

（6）配置JSP屬性

（7）配置JAAS授權認證

（8）配置資源引用

（9）配置WEB應用首頁

JSP基本原理

JSP文件必須在JSP服務器內運行

JSP文件必須生成Servlet才能執行

每個JSP頁面的第一個訪問者速度很慢，因為必須等待JSP編譯成Servlet

JSP頁面的訪問者無須安裝任何客戶端，甚至不需要可以運行Java的運行環境，因為JSP頁面輸送到客戶端的是標準HTML頁面

JSP頁面內容包含兩個部分：靜態部分（HTML標簽及靜態內容）、動態部分（受Java程序控制的內容）

JSP頁面會被Tomcat在work編譯成兩個文件：*_jsp.java，*_jsp.class。此文件是一個標準Servlet類

JSP注釋

JSP注釋不會輸出到客戶端，格式如下：

<%-- 注釋內容 --%>

JSP聲明

JSP聲明用于聲明變量和方法

<%! 聲明部分 %>

JSP輸出

<%=表達式%>

PS：表達式后不能有分號，效果等同于out.println

JSP腳本

<% 代碼 %>

PS：JSP腳本中的內容，將作為Servlet中service方法的方法體。因此在其中聲明的變量為局部變量，并且不可以在腳本中定義方法

JSP的編譯指令（3個）

編譯指令格式如下

<%@ 編譯指令 屬性名="屬性值"...%>

1.page：是針對當前頁面的指令，位于頁面頂端

屬性說明：

language：聲明JSP頁面使用的腳本語言，默認java
extends：指定JSP編譯后的類所繼承的父類或接口
import：用來導入包，默認導入的包有：java.lang.*,javax.servlet.*,javax.servlet.jsp.*,javax.serlvet.http.*
session：設置當前頁面是否需要session
buffer：指定輸出緩沖區大小。輸出緩沖區用于JSP內部對象out，默認8KB
autoFlush：當輸出緩沖區即將溢出時，是否需要強制輸出緩沖區的內容。true正常輸出，false產生異常
info：設置JSP程序說明，通過Servlet.getServletInfo()獲取該值
errorPage：指定錯誤處理頁面。如果頁面報錯，且未做異常處理，則跳轉錯誤處理頁面
isErrorPage：設置本JSP頁面是否為錯誤處理頁面
contentType：用于設置頁面的文件格式和編碼字符集。默認MIME類型為text/html；默認字符集為：ISO-8859-1
pageEncoding：設置頁面的編碼字符集

2.include：指定包含另一個頁面

語法如下：

<%@include file="相對路徑"%>

include指令可以將外部文件嵌入當前頁面，這是靜態include語句，它會把目標頁面的其他編譯指令也包含進來。即先把目標頁面的代碼融入當前頁面后再編譯。

PS：如果被包含的頁面需要經常改變，建議使用<jsp:include>,它是動態include語句

3.taglib：用戶定義和訪問自定義標簽

JSP的動作指令（7個）

jsp:forward：執行頁面轉向，將請求轉發到下一個頁面
jsp:param：用于傳遞參數，必須與其他支持參數的標簽一起使用
jsp:include：動態導入JSP頁面
jsp:plugin：用于下載JavaBean或Applet到客戶端執行
jsp:userBean：創建JavaBean實例
jsp:setProperty：設置JavaBean實例的屬性值
jsp:getProperty：獲取JavaBean實例的屬性值

1.forward指令

用于頁面轉發，可轉發到靜態頁面、動態頁面或Servlet。轉發后的請求參數不會丟失。

語法如下：

<jsp:forward page="相對路徑">
    <jsp:param name="key" value="value"/>
</jsp:forward>

轉發時可通過param指令傳遞參數，并通過如下方式獲取值：

<%=request.getParameter("key")%>

2.include指令

動態的頁面導入命令，它不會導入被包含頁面的編譯指令，僅將被導入頁面的body內容插入本頁。

語法如下：

<jsp:include page="相對路徑" flush="true">
    <jsp:param name="key" value="value"/>
</jsp:include>

flush屬性設置輸出緩存是否轉移到被導入文件中，true則包含在被導入文件中，false則包含在原文件中。

動態導入和靜態導入的區別
(1)靜態導入是將被導入頁面的代碼完全融入，兩個頁面融合成一個Servlet；而動態導入則在Servlet中使用include方法來引入被導入頁面的內容
(2)靜態導入時被導入頁面的編譯指令會起作用；而動態導入時被導入頁面的編譯指令則失去作用
(3)動態導入可以傳遞額外的參數

3.useBean、setProperty、getProperty指令

這三個指令都是JavaBean相關指令。在我們將重復代碼定義成Java類的方法后，這三個指令可用于調用。

useBean語法如下：

<jsp:userBean id="name" class="classname" scope="page|request|session|application"/>

id：是JavaBean的實例名
class：指定JavaBean的實現類
scope：指定JavaBean實例的作用范圍，page（當前頁面有效）、request（本次請求有效）、session（本次會話有效）、application（當前應用一直有效）

setProperty語法如下：

<jsp:setProperty name="BeanName" property="propertyName" value="value"/>

getProperty語法如下：

<jsp:getProperty name="BeanName" property="propertyName"/>

舉個例子，如下圖：

4.param指令

param指令無法單獨使用，可以與如下指令結合使用：

（1）jsp:include

（2）jsp:forward

（3）jsp:plugin

JSP內置對象（9個）

application：ServletContext實例，代表所屬WEB應用本身
config：ServletConfig實例，代表應用配置信息
exception：Throwable實例，代表其他頁面的異常，只有當前頁面是錯誤處理頁面時可用
out：JspWriter實例，代表頁面輸出流，用于輸出內容
page：代表頁面本身，及生成的Servlet類
pageContext：PageContext實例，代表頁面上下文，可訪問頁面的共享數據
request：HttpServletRequest實例，該對象封裝了一次請求和請求參數
response：HttpServletResponse實例，代表服務器響應
session：HttpSession實例，代表一次會話。當瀏覽器與站點建立連接時，會話開始；關閉瀏覽器時會話結束

PS：JSP內置對象要么是Servlet方法的局部變量，要么是方法的形參，所以我們可以直接在腳本中調用他們。

1.application對象

application兩個作用

在整個WEB應用中讓多個JSP、Servlet之間共享數據（使用setAttribute，getAttribute）
訪問WEB應用的配置參數（使用getInitParameter）

2.config對象

用于Servlet獲取配置參數（使用getInitParameter）

3.exception對象

exception對象僅在異常處理頁面有效

4.pageContext對象

使用pageContext可以訪問page、request、session、application范圍的變量

getAttribute(String name)：取得page范圍內的屬性
getAttribute(String name, int scope)：取得指定范圍內的屬性，
scope包含PageContext.PAGE_SCOPE、PageContext.REQUEST_SCOPE、PageContext.SESSION_SCOPE、PageContext.APPLICATION_SCOPE
setAttribute(String name, String value)：設置page范圍內的屬性
setAttribute(String name, String value, int scope)：取得制定范圍內的屬性

使用pageContext可以獲取其他內置對象

getRequest()：獲取request對象
getResponse()：獲取response對象
getServletConfig()：獲取config對象
getServletContext()：獲取application對象
getSession()：獲取session對象

5.request對象

（1）獲取請求頭/請求參數

getParameter(String paramName)：獲取請求參數的值
getParameterMap()：獲取所有請求參數名和值組成的Map對象
getparameterValues(String name)：獲取請求參數多個值時所組成的數組
getHeader(String name)：獲取指定的請求頭的值

GET與POST

GET方式的請求：GET請求會將請求參數的名和值轉換成字符串，并附加在原URL之后，URL和參數之間以"?"分隔，多個參數之間以"&"分隔，且請求傳送的數據量較小，一般不大于2KB

POST方式的請求：POST請求參數的大小不受限制，往往取決于服務器的限制，POST傳輸的數據量比GET傳輸的數據量大，且請求參數放在HTTP HEADER中傳輸，安全性相對較高

PS：
（1）不是每個表單域都會生成請求參數，只有帶有name屬性的表單域才行
（2）每個有name屬性的表單域對應一個請求參數
（3）如果有對個表單域有相同的name屬性，則多個表單域只生成一個請求參數，且該參數有多個值
（4）表單域的name屬性為請求參數名，value屬性為請求參數值
如果表單域設置了disabled="disabled"屬性，則不會生成請求參數

（2）操作request范圍的屬性

setAttribute(String name, Object value)：設置request范圍屬性
getAttribute(String name)：獲取request范圍屬性

（3）執行forward或include

getRequestDispatcher(String path).forward(request, response)：跳轉頁面
getRequestDispatcher(String path).include(request, response)：包含頁面

6.response對象

（1）response響應生成非字符響應

getOutputStream()：獲取輸出流

（2）重定向

sendRedirect("path")：重定向，重定向會丟失所有請求參數

forward與redirect對比

（3）增加cookie

addCookie(Cookie cookie)：增加cookie
getCookies()：獲取cookie數組

7.session對象

seesion代表一次用戶會話，即客戶端瀏覽器連接服務器開始，到關閉瀏覽器結束。session屬性可在一次會話內在多個頁面間共享數據。session屬性值必須是可序列化的Java對象。

setAttribute(String attName, Object attValue)：設置session屬性值
getAttribute(String attName)：獲取session屬性值

爭議與思考

我們日常開發經常使用瀏覽器來訪問WEB應用，IE、360、火狐、谷歌你覺得哪個瀏覽器最好用？為什么呢？評論區留言吧！

PI （Application Programming Interface,應用程序編程接口），是一套用來控制Windows的各個部件，從桌面外觀到為一個新進程分配內存的外觀和行為的一套預先定義的Windows函數，用戶的每個動作都會引發一個或幾個函數的運行以告訴Windows發生了什么。

下面小編給大家總結了一些JavaScript常用的API列表：

元素查找

class操作

節點操作

事件

屬性操作

// 獲取屬性值el.getAttribute('alt');

// 設置屬性值el.setAttribute('alt', '圖片描述');

內容操作

// 獲取元素內容

el.innerHTML

// 設置元素內容

el.innerHTML=string

// 獲取元素內容(包含元素自身)

el.outerHTML

// 設置元素內容(包含元素自身)

el.outerHTML=string

// 獲取文本內容

// ie8

el.innerText

// ie9+

el.textContent

// 設置文本內容

// ie8

el.innerText=string

// ie9+

el.textContent=string

css操作

// 獲取css樣式

// ie8

el.currentStyle[attrName]

// ie9+

window.getComputedStyle(el)[attrName]

// 偽類

window.getComputedStyle(el , ":after")[attrName];

// 設置CSS樣式

el.style.display='none';

DOM加載完

function ready(fn) {

if (document.readyState !='loading'){

// ie9+

document.addEventListener('DOMContentLoaded', fn);

} else {

// ie8

document.attachEvent('onreadystatechange', function() {

if (document.readyState !='loading'){

fn();

}

});

}

綁定上下文

// ie8

fn.apply(context, arguments);

// ie9+

fn.bind(context);

去除空格

// ie8

string.replace(/^\s+|\s+$/g, '');

// ie9+

string.trim();

Ajax

JSON處理

JSON.parse(string);

JSON.String(Object)

節點遍歷

function forEach( nodeList, callback ) {

if(Array.prototype.forEach){

// ie9+

Array.prototype.forEach.call( nodeList, callback );

}else {

// ie8

for (var i=0; i < nodeList.length; i++){

callback(nodeList[i], i);

}

forEach(document.querySelectorAll(selector),function(el, i){

})

在線咨詢

上一篇：卡西歐G-SHOCK Frogman蛙人系列新手表：
下一篇：CSS樣式中rem、em和px 區別以及其工作原理解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript的DOM對象終極總結：你必看的j

書簡介

WEB應用和web.xml

JSP基本原理

JSP注釋

JSP聲明

JSP輸出

JSP腳本

JSP的編譯指令（3個）

JSP的動作指令（7個）

JSP內置對象（9個）

爭議與思考

元素查找

class操作

節點操作

事件

屬性操作

內容操作

css操作

DOM加載完

綁定上下文

去除空格

Ajax

JSON處理

節點遍歷

您的項目需求