《JavaEE》第四周day5学习笔记-JavaScript2

一、DOM

（一）概念

---

Document Object Model，文档对象模型，通过获取元素的对象，控制元素的属性及内容，是中立与平台和语言的接口。
W3C DOM标准被分为三个部分
1.Core DOM：针对All结构化文档的标准模型

• Node：节点对象（ parentElement）
• Document：文档对象
• Element：元素对象
• Attribute：属性对象
• Test：文本对象
• Comment：注释对象

2.XML DOM：针对XML文档的标准模型
3.HTML DOM：针对HTML文档的标准模型

（二）Core DOM

---

1.获取Document对象
window.document
document
2.获取Element对象
getElementById()：通过ID获取对象
getElementsByName()：通过name属性获取对象
getElementsByTagName()：通过标签名获取对象
getElementsByClassName()：通过类名获取对象
3.创建对象
createElement()：创建元素对象
createAttribute()：创建属性对象
createTextNode()：创建文本对象
createComment()：创建注释对象
备注：对象1.appendChild(对象2)，可将对象2添加至对象1
4.设置&删除属性
setAttribute()：设置属性
removeAttribute()：移除属性
备注：可以通过“对象.属性 = “值””方式给属性赋值
5.DOM树
appendChild()：增加子节点（尾部）
removeChild()：移除子节点
parentNode()/parentElement()：返回父节点，后者仅IE支持
.innerHTML：对象包含的内容（标签解析）
.innerText：对象包含的内容（标签不解析）

二、BOM

（一）概念

---

Browser Object Model，浏览器对象模型，将浏览器的组成部分封装为对象。

• Window：窗口对象
• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史对象
• Location：地址栏对象

（二）常用的BOM

---

1.Window对象
history对象：获取History对象引用，包含历史URL信息
location对象：包含当前URL信息
alert()：弹出提示窗口，包含“确认”
confirm()：弹出提示窗口，包含“确认”、“取消”按钮
prompt()：弹出提示窗口，包含“输入栏”
open()：打开窗口
close()：关闭窗口
setInterval()：循环计时器
setTimeout()：计时器
clearInterval()：清除循环计时器，传参为循环计时器对象
clearTimeout()：清除计时器，传参为计时器对象
2.Navigator对象
userAgent()：返回浏览器相关信息（头部值）
3.Screen 对象（没有方法）
height属性：返回屏幕的高度
width属性：返回屏幕的宽度
4.History 对象
length属性
back()：等价于浏览器后退按钮
forward()：等价于浏览器前进按钮
go()：访问URL列表的某个URL，参数为相对位置
5.Location 对象
href属性：可以设置或返回当前URL
reload()：重新加载当前文档

三、事件

某些元素被执行操作后，会触发关联的代码（函数），这个触发过程被称为事件。常见的事件如下
1.点击事件
onclick：单击事件
ondblclick：双击事件
2.焦点事件
onfocus：获得焦点
onblur：失去焦点
注意，切勿将alert()与焦点事件并用，会陷入死循环
3.加载事件
onload：完成加载，通常用于页面或图像加载完成后触发行为
4.鼠标事件
onmousedown：鼠标按下
onmouseup：鼠标松开
onmousemove：鼠标移动
onmouseover：鼠标移入某元素
onmousedown：鼠标移出某元素
5.键盘事件
onkeydown：某个按键按下
onkeyup：某个按键松开
onkeypress：某个按键被点按
6.变更事件
onchange：内容被改变
7.表单事件
onsubmit：表单被提交

四、JavaScript面向对象

创建方法1（json格式）：

var 对象名 = {
      属性名1:属性值1,
      属性名2:属性值2,
      方法名:function () {
          方法体;
      }
}

创建方法2（new方式）：

var 对象名 = new Object();
对象名.属性名1 = 属性值1;
对象名.属性名2 = 属性值2;
对象名.方法名 = function ()  {
    方法体;
}  

创建方法3（构造方法）：

function 对象名(属性名1,属性名2) {
        this.属性名1 = 属性值1;
        this.属性名2 = 属性值2;
        this.方法名 = function () {
           方法体;
        }
 }
 var 实例名 = new 对象名(属性值1,属性值2);//实例化

【注意】

• 属性值需要调用函数时，务必在函数后面补上“;”符号，否则无效！
• document.getElementxxx方法时，括弧中的内容需要带上""，否则会作为变量处理！
• 表格（table）的边框由<table>的border属性和<td/th>的border属性共同构成！