JavaWebDay10_BOM对象,DOM对象,HTMLDom,事件

最新推荐文章于 2020-08-19 17:28:14 发布

原创最新推荐文章于 2020-08-19 17:28:14 发布 · 236 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#BOM对象 #DOM对象 #HTMLDom #事件

Web第十天专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了JavaWeb中的BOM（浏览器对象模型）与DOM（文档对象模型），涵盖window、location、history等BOM对象的使用，及DOM核心、HTMLDOM、XMLDOM的概念与操作方法。详细解析了如何通过各种方法获取和创建DOM元素，以及事件的处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaWebDay10

课程大纲

1、BOM对象
2、DOM对象
3、HTMLDom
4、事件

第一章 BOM对象

1、window对象的属性

A. 获取其他BOM对象：
	history
	location
	Navigator
	Screen
	
B. 获取DOM对象
	document

2、location对象

A.方法
	reload() 重新加载"刷新"

B.属性
	href 跳转到某个页面,获取页面地址

C.例如:
	var v1 = location.href;  //这里的v1 获取页面的地址
	location.href = "http://www.itheima.com";  //这里就是跳转到 黑马程序员 页面

3、history历史记录

A.方法
	a.forward()  //前进历史记录  
	b.back() //后退历史记录
	c.go(数字) //正数是前进,负数是后退

B.属性
	length  //当前的窗口历史记录的数据(注意:不是浏览器,是窗口)

第二章 DOM对象

1、含义

DOM 文档对象模型 document object modle

2、分类

A.DOM核心
		a.节点 Node --> (父亲)
		b.文档 Document
		c.元素 Element
		d.属性 Attribute
		e.文本 Text
		f.注释 Comment
        
B.HTMLDom

C.XMLDom

3、获取Element的对象方法

A. getElementById("id值")  //通过id获取对象,返回值是唯一的一个对象(id在页面当中唯一)
B. getElementsByTagName("标签")  //通过标签的名称获取所有的对象,返回的是一个数组.
C. getElementsByClassName("class值") //通过class属性,获取所有的对象,返回的是一个数组.
D. getElementsByName("name值") //通过name属性,获取所有的对象,返回的是一个数组

4、创建Document几个对象的方法

A. createAttribute() //创建属性
B. createComment() //创建注释
C. createElement() //创建元素
D. createTextNode() //创建文本节点

5、Elemnet元素相关的方法

A. removeAttribute() //删除属性
B. setAttribute() //设置属性

6、Node相关的方法

A.增删改方法
	a.增 appendChild()  
	b.删 removeChild()
	c.改 replaceChild()

B.属性
	parentNode //返回父节点的对象

7、a标签的超链接

A.两个效果
	a.样式
	b.界面跳转

B.阻止界面跳转的代码
	javascript:void(0);

第三章 HTMLDom

1、关于 innerHTML 的用法

A. 设置和获取标签
B. 控制标签样式

2、设置样式

A.自己代码设置
	标签的对象.style. ...
    
B.用CSS现有的
	标签的对象.className = CSS的class属性

第四章事件

1、事件的四个组成部分

A. 事件 （用户的操作"点击","双击","移动","改变"...）
B. 事件源（按钮,图片,文本输入框...）
C. 监听器 （出现操作之后,需要执行的代码）
D. 注册监听器 （绑定事件源和监听器之间的操作）

2、常见的事件

A. 点击事件：

a. onclick：单击事件  //重点
b. ondblclick：双击事件

B. 焦点事件

a. onblur：失去焦点
b. onfocus:元素获得焦点。

C. 加载事件：

a. onload：一张页面或一幅图像完成加载。

D. 鼠标事件：

a. onmousedown  鼠标按钮被按下。
b. onmouseup    鼠标按键被松开。
c. onmousemove  鼠标被移动。
d. onmouseover  鼠标移到某元素之上。
e. onmouseout   鼠标从某元素移开。

E. 键盘事件：

a. onkeydown    某个键盘按键被按下。  
b. onkeyup      某个键盘按键被松开。
c. onkeypress   某个键盘按键被按下并松开。

F. 选择和改变

a. onchange 域的内容被改变。
b. onselect 文本被选中。

G. 表单事件：

a. onsubmit 确认按钮被点击。 //重点（存在返回值,true提交.false不提交）
b. onreset  重置按钮被点击。

案例1: 表单提交事件（写法1）

<!-- HTML的写法 -->
<form  method="get">
    <input type="text" name="password"/>
    <input type="submit"/>
</form>

<!-- JavaScript 脚本-->
<script>
    //设置一个页面加载完毕的事件
    window.onload = function (ev) {
        //获取到表单标签,设置事件
        var mform = document.getElementsByTagName("form")[0];
        mform.onsubmit = function () {
            return false;
        }
    }
</script>

案例2: 表单提交事件（写法2）【推荐】

<!--
    1.在HTML的form表单标签上面,设置属性 onsubmit="return tijiao()"
    2.在JavaScript当中定义函数,函数的返回值如果是true就可以提交.是false就不能提交
-->

<!-- HTML的写法 -->
<form  method="get" onsubmit="return tijiao()">
    <input type="text" name="password"/>
    <input type="submit"/>
</form>

<!-- JavaScript 脚本-->
<script>
    //定义函数
    function tijiao() {
        return false;
    }
</script>