(JavaWeb )Dom相关知识-js

Z_cx

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2026-07-23 14:30:00 发布 311 阅读 AI 写同款· GEO 优化 ›

JavaWeb学习日志2（JS、Vue、Ajax） var add = (a,b)=>{/* 箭头函数 */return a+b; 阅读详情

Dom相关知识

概念

DOM是文档对象模型
文档：HTML和XML
Dom的组成：核心Dom，Html Dom， XML Dom
其中介意用Xml Dom 代替 HTML Dom

Dom解析过程

在这里插入图片描述
解析过程：
Dom根据HTML的层级结构，在内存中形成一个树形结构，属性结构里面有标记元素和文本等元素，整个html文档对应一个docunment队形，通过doucument文档对象可以操作HTML里面所得到的所有元素。

如何访问节点

参考W3cschool手册
1.XML > XML DOM > XML DOM 参考手册 > Node 》Node 对象的属性

常用：

1. 节点对象.childNodes:返回节点到子节点的节点列表。
2. 节点对象.parentNode:返回节点的父节点。

获取文档中元素

HTML Dom方法：

1. 根据标记的id属性值获取元素：
		document.getElementById(id属性对应的值)
2. 根据标记名称来获取元素对象(返回数组（多个元素）)：
		document.getElementsByTagName(标记名称)
3. 根据name属性获取元素对象(返回数组)：
		document.getElementsByName(name属性对应的值)

JavaScript

概念

* 基于对象和事件驱动的语言，它应用于客户端
	1. 基于对象：在js中提供一些对象，可以直接使用
		面向对象：在java中先创建在使用
	2. 事件驱动：js里它触发事件，调用函数，网页事项动态效果。
	3. 客户端：浏览器。
* JavaScript和java区别：
	1. JavaScript是网景的产品，java属于SUn，现Oracle
	2. JavaScript只要有浏览器就可以，java依靠虚拟机
	3. JavaScript是弱类型语言，java是强类型语言。
		弱类型语言：所有变量都可用var定义变量，var a = 10， var b = "hello"
		强类型语言：在java中 int a = 10, int b = "hello " 是错误的
* javaScript组成：
	1. EcmaScript：规范了js基础语法
	2. Bom，浏览器对象模型，操纵浏览器
	3. Dom：文档对象模型，操纵文档
* JavaScript作用：给网页增加动态效果
	1. 内嵌式：
		在网页中，引入js代码的基本语法：<script type="text/javascript">js代码</script>
	2. 外链式：
		在网页中，引入js代码的基本语法：<script type="text/javascript" src="代码位置"></script>
	3. 数据类型:
		NUmber:数字类型
		String：字符串类型
		Object：对象类型
		null：空类型
		Nudefined：位置类型
		Boolean：布尔类型
	4. 变量：用var定义变量
	5. 运算符：
		> 算数运算符：加+ 减- 乘* 除/ 取余%
		> 比较运算符(返回布尔值):  < > <= >= 等
		> 逻辑运算符： 与&& 或 || 等
		> 赋值运算符： +=   -=   =等			
		！！！注意：var a= 10 ;var b = "0"; var c = a - b;  在进行算数时，会把String类型转化为Number类型
	6. 条件语句：if ，else if，else，等
		其他语句：for语句。switch语句。与java基本相同。

js使用

函数的定义和使用

1. 创建普通函数：

function add1(x, y){
	var num = a + b;
	return num;
}

2. 创建匿名函数:

var add2 = function(a, b){
	var sum = a+b;
	return sum;
}

3. 创建动态函数：
	a. 定义函数参数：
		var param = "a, b";
	b. 创建函数体：
		var method = " var sum = a+b;return sum;"
	c. 动态函数：
		var add3 = new Function(param, method);

事件处理

网页中绑定事件：
1. 直接绑定：<input type="button" name = "btn" value="点我" onclick="add();" /> function add(){alert("点我啊！")}
2. 通过给事件属性附一个函数：<input type="button" name = "btn" value="点我" id = "b1" /> document.getElementById("b1").onclick=function(){alert("123123")}
常用事件：在W3cschool手册有
Browser Scripting 》开始学习 JavaScript 》JavaScript 事件参考手册
属性当以下情况发生时，出现此事件 FF N IE
onabort 图像加载被中断 1 3 4
onblur 元素失去焦点 1 2 3
onchange 用户改变域的内容 1 2 3
onclick 鼠标点击某个对象 1 2 3
ondblclick 鼠标双击某个对象 1 4 4
onerror 当加载文档或图像时发生某个错误 1 3 4
onfocus 元素获得焦点 1 2 3
onkeydown 某个键盘的键被按下 1 4 3
onkeypress 某个键盘的键被按下或按住 1 4 3
onkeyup 某个键盘的键被松开 1 4 3
onload 某个页面或图像被完成加载 1 2 3
onmousedown 某个鼠标按键被按下 1 4 4
onmousemove 鼠标被移动 1 6 3
onmouseout 鼠标从某元素移开 1 4 4
onmouseover 鼠标被移到某元素之上 1 2 3
onmouseup 某个鼠标按键被松开 1 4 4
onreset 重置按钮被点击 1 3 4
onresize 窗口或框架被调整尺寸 1 4 4
onselect 文本被选定 1 2 3
onsubmit 提交按钮被点击 1 2 3
onunload 用户退出页面 1 2 3