学习前的一个简单案例
DOM
1.功能：控制html文档的内容
2.获取页面标签(元素)对象：Element

document.getElementById(“id值”):通过元素的id获取元素对象

3.操作Element对象：

修改属性值：
1. 明确获取的对象是哪一个？
2. 查看API文档，找其中有哪些属性可以设置
修改标签体内容：
* 属性：innerHTML
1. 获取元素对象
2. 使用innerHTML属性修改标签体内容

如何绑定事件

直接在html标签上，指定事件的属性(操作)，属性值就是js代码
事件：onclick— 单击事件
通过js获取元素对象，指定事件属性，设置一个函数

事件简单学习
代码实现：
要求：灯泡关闭情况下，点击灯泡，灯泡亮；灯泡打开情况下，点击灯泡，灯泡关闭。

BOM

概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。
组成：

Window：窗口对象（包括了DOM对象）

Navigator：浏览器对象
整个浏览器，就是一个浏览器对象

Screen：显示器屏幕对象
顾名思义，显示器屏幕的对象

History：历史记录对象
在浏览器中有一个看不见的历史记录对象，记录着你浏览过页面的记录，比如你在当前页面跳转到另一个页面后，点击前进后退。

Location：地址栏对象

1. Window：窗口对象

创建
因为Windows是一个全局对象，所以可以直接使用方法。

方法

与弹出框有关的方法：

 alert()   显示带有一段消息和一个确认按钮的警告框。confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。* 如果用户点击确定按钮，则方法返回true* 如果用户点击取消按钮，则方法返回falseprompt() 显示可提示用户输入的对话框。* 返回值：获取用户输入的值

与打开关闭有关的方法：

close()  关闭浏览器窗口。* 谁调用我 ，我关谁
open()  打开一个新的浏览器窗口* 返回新的Window对象

这里var newWindows可以理解为一个对象，将打开百度的open方法给了这个对象，通过newWindows对象调用close方法，谁调用关闭谁，就实现了关闭打开的窗口。

与定时器有关的方式

setTimeout(JS代码，毫秒值)  在指定的毫秒数后调用函数或计算表达式。
clearTimeout()  取消由 setTimeout() 方法设置的 timeout。
setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。（循环执行）
clearInterval() 取消由 setInterval() 设置的 timeout。

3. 属性：

获取其他BOM对象：
history
location
Navigator
Screen:
获取DOM对象
document

4.特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();

2.Location：地址栏对象

创建(获取)：
1. window.location
2. location
方法：
reload() 重新加载当前文档。相当于刷新
属性
href 设置或返回完整的 URL。

3.History：历史记录对象

创建(获取)：
1. window.history
2. history
方法：
- back() 加载 history 列表中的前一个 URL。
- forward() 加载 history 列表中的下一个 URL。
- go(参数) 加载 history 列表中的某个具体页面。
  - 参数：
    - 正数：前进几个历史记录
    - 负数：后退几个历史记录
属性：
- length 返回当前窗口历史列表中的 URL 数量。

4.Navigator：浏览器对象

不常用，这里不做介绍

5.Screen：显示器屏幕对象

不常用，这里不做介绍

DOM

概念： Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

1.核心 DOM - 针对任何结构化文档的标准模型

Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象

Document：文档对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

创建(获取)：在html dom模型中可以使用window对象来获取

window.document
document

方法：

write() 向文档写 HTML 表达式 或 JavaScript 代码。获取Element对象：1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组创建其他DOM对象：createAttribute(name)createComment()createElement() 创建元素对象方法createTextNode()

属性

Element：元素对象

获取/创建：通过document来获取和创建
方法：
removeAttribute()：删除属性
setAttribute()：设置属性

Node：节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点
方法：

CRUD dom树：
appendChild()：向节点的子节点列表的结尾添加新的子节点。
removeChild()   ：删除（并返回）当前节点的指定子节点。
replaceChild()：用新节点替换一个子节点，第一个参数是使用的新节点，第二个参数是要替换的子节点。

href= " " （空字符串，在点击的时候，会直接返回当前页面。）
href= " javascripts:void(0) "（阻止返回值的一个js代码，这样可以阻止返回当前页面）

属性：

parentNode 返回节点的父节点。

动态表格练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动态表格</title><style>table{border: 1px solid;margin: auto;width: 500px;}td,th{text-align: center;border: 1px solid;}div{text-align: center;margin: 50px;}</style></head>
<body><div><input type="text" id="id" placeholder="请输入编号"><input type="text" id="name"  placeholder="请输入姓名"><input type="text" id="gender"  placeholder="请输入性别"><input type="button" value="添加" id="btn_add"></div><table id="table"><caption>学生信息表</caption><tr><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td></tr><tr><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0);"  onclick="delTr(this);">删除</a></td></tr><tr><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0);"  onclick="delTr(this);">删除</a></td></tr></table><script>//1.获取btn// var btn_add = document.getElementById("btn_add");//2.绑定单击事件/*btn_add.onclick = function() {//获取每一个输入框内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//获取表格var table = document.getElementById("table");//创建trvar id = document.createTextNode(id);var name = document.createTextNode(name);var gender = document.createTextNode(gender);var td_id = document.createElement("td");var td_name = document.createElement("td");var td_gender = document.createElement("td");var tr = document.createElement("tr");td_id.appendChild(id);tr.appendChild(td_id);td_name.appendChild(name);tr.appendChild(td_name)td_gender.appendChild(gender);tr.appendChild(td_gender);var a = document.createElement("a");var td_a = document.createElement("td")a.setAttribute("href","javascript:void(0);");a.setAttribute("onclick","delTr(this)");var del = document.createTextNode("删除");a.appendChild(del);td_a.appendChild(a);tr.appendChild(td_a);table.appendChild(tr);*///使用innerHTML添加document.getElementById("btn_add").onclick = function() {//获取每一个输入框内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//获取tablevar table =document.getElementById("table");//追加一行table.innerHTML += "<tr>\n" +"        <td>"+id+"</td>\n" +"        <td>"+name+"</td>\n" +"        <td>"+gender+"</td>\n" +"        <td><a href=\"javascript:void(0);\"  οnclick=\"delTr(this);\">删除</a></td>\n" +"    </tr>";}function delTr(obj) {var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}</script>
</body>
</html>

2.XML DOM - 针对 XML 文档的标准模型

这里先不介绍。

3.HTML DOM - 针对 HTML 文档的标准模型

标签体的设置和获取：innerHTML
不光可以设置标签体的内容，还可以在标签中嵌套标签。比如：
使用html元素对象的属性
控制元素样式
1. 使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”;
2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

事件监听机制

概念：某些组件被执行了某些操作后，触发某些代码的执行。

事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
事件源：组件。如：按钮文本输入框…
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件：
Event对象

点击事件：
onclick：单击事件
ondblclick：双击事件
焦点事件
onblur：失去焦点
onfocus:元素获得焦点。
加载事件：
onload：一张页面或一幅图像完成加载。
鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
键盘事件：
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
选择和改变
1. onchange 域的内容被改变。
2. onselect 文本被选中。
表单事件：
1. onsubmit 确认按钮被点击。
2. onreset 重置按钮被点击。

表格全选

表单校验

学习完BOM和DMO后看一张图

看看你是否可以进一步理解DOM

重点

1.如何获取表单中用户输入的参数值？

//获取id为nameId的节点
var inputEle = document.getElementById("nameId");
var targetEle =document.getElementById("target");
//获取value
var a = inputEle.value;
targetEle.innerHTML=a;

2.javascripts：void(0)有何含义？
答：可以阻止返回当前页面的值，以防循环返回到当前页面。

3.在标签中使用事件onclick属性，属性值填方法的时候，应该怎样填写才能生效？
答：在方法前加return，因为属性值中写方法，默认会在方法外部嵌套一个function方法。如图：

所以要在方法前加一个return，返回最后的结果值。

4.Node节点的parentNode 属性如何使用？
答：parentNode属性的作用是：返回节点的父节点。
使用：a).比如在table表格标签中添加一个tr标签，可以先获取tr标签的对象，
b).然后通过tr对象.parentNode获取上一节点的table表格对象，
c).然后通过var tr = createElement(“tr”)来创建一个元素对象，
d).然后appendChild()方法来添加tr标签 – table.appendChild(tr)

JavaWeb：JavaScripts高级相关推荐

JavaWeb=JavaScript高级
DOM是一个使程序和脚本有能力动态地访问和更新文档的内容.结构以及样式的平台和语言中立的接口.,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口. javascript 有三 ...
JavaWeb面试(二)
JavaWeb面试(高级篇) 一.前端面试经典题目 1.说明 HTML 文档中 DTD 的意义和作用(酷讯) DTD,文档类型定义,是一种保证 html 文档格式正确的有效方法,在解析网页时,浏览器将 ...
部署JavaWeb项目到Linux 云服务器上
如果我的博客能够帮到大家能够点个赞,关注一下,以后还会更新更过JavaWeb的高级技术,大家的支持就是我继续更新的动力.谢谢. 一.前期准备 Linux Ubuntu 16.04 阿里云阿里云 ...
访问tomcat 服务器出现,Welcome to nginx!
如果我的博客能够帮到大家能够点个赞,关注一下,以后还会更新更过JavaWeb的高级技术,大家的支持就是我继续更新的动力.谢谢. 今天在使用服务器部署项目访问的时候,遇到了如下问题 ...
Spring整合JPA
如果我的博客能够帮到大家能够点个赞,关注一下,以后还会更新更过JavaWeb的高级技术,大家的支持就是我继续更新的动力.谢谢. 今天,来写一遍Spring整合JPA的Demo,Spring框架呢是我 ...
基于SSM的商城系统
如果我的博客能够帮到大家能够点个赞,关注一下,以后还会更新更过JavaWeb的高级技术,大家的支持就是我继续更新的动力.谢谢咯. 该商城使用SSM开发,使用到了一些SSM的常用技术,Spring.S ...
springboot入门书籍_2019版JavaEE学习路线图（内含大纲+视频+工具+书籍+面试）
黑马程序员微信号:heiniu526 传智播客旗下互联网资讯,学习资源免费分享平台播妞深知广大爱好Java的人学习是多么困难,没视频没资源,上网花钱还老担心被骗.因此专门整理了新版的学习路线图,不 ...
Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value '
如果我的博客能够帮到大家能够点个赞,关注一下,以后还会更新更过JavaWeb的高级技术,大家的支持就是我继续更新的动力.谢谢. 今天在使用SpringBoot 链接数据库,测试得时候出现了以下错误: ...
jsp 事务反射基础基础知识
如果我的博客能够帮到大家能够点个赞,关注一下,以后还会更新更过JavaWeb的高级技术,大家的支持就是我继续更新的动力.谢谢. 为了方便之后的复习,将学习笔记发布到博客中,供大家使用. jsp ...
2019年新版Java学习路线图（内含大纲+视频+工具+书籍+面试）
一.2019新版Java学习路线图---每阶段市场价值及可解决的问题二.2019新版Java学习路线图---学习大纲及各阶段知识点三.2019新版Java学习路线图---升级后新增知识点一览四. ...

JavaWeb：JavaScripts高级

BOM