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);
事件处理
- 网页中绑定事件:
- 直接绑定:
<input type="button" name = "btn" value="点我" onclick="add();" />
function add(){alert("点我啊!")}
- 通过给事件属性附一个函数:
<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
常用对象
- window对象: