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处理

节点遍历

您的项目需求