12-Javaweb学习-JS DOM文档对象模型

DOM：Document Object Model 文档对象模型

概念：将标记语言文档的各个组成部分 封装为对象

组成：

​ Document：文档对象

​ Element:元素对象

​ Attribute：属性对象

​ Text：文本对象

​ Comment：注释对象

​ Node：节点对象

Document：文档对象

获取：window.document

//document 中 body属性 可以获取body标签对象
document.body.bgColor = "red";
//title 属性获取文档标题
var bt = document.title;
//获取文档最后一次修改时间
var rq=document.lastModified;
//URL 属性 获取地址栏中的地址

方法：

获取Element对象

​ getElementById():通过id属性值获取唯一的元素

​ etElementsByTagName():通过标签名称获取元素对象数组

​ getElementsByName():通过name属性值获取元素对象数组

​ getElementsByClassName():通过class属性值获取元素对象数组

创建其他对象

​ createElement:创建元素对象

​ createAttribute：创建属性对象

​ createComment：创建注释对象

​ createTextNode：创建文本对象

//给属性对象设置值
font1.setAttribute('color','yellow');
bd.remove(); 删除自己
bd.removeChild(div); //移除子元素
//根据属性名来移除标签上的属性
//div.removeAttribute("align");
//移除属性对象。你传入的是一个属性对象
//div.removeAttributeNode(attr);

例子：	
var div4 = window.document.createElement("div");
var text1 = window.document.createTextNode("我是第四个div");
var v = div4.appendChild(text1);
document.getElementsByTagName("body")[0].appendChild(div4);

Element:元素对象

​ innerHTML属性：获取或设置 元素的 子内容
​ innerTEXT属性:获取标签之间的文本内容

事件：

​ 事件：一件事

​ 事件源：事件发生的组件。

​ 监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法

​ 注册监听：将监听器绑定到事件源上，监听事件的发生

js中注册监听的方式：

1. 在定义标签时，添加 事件名称属性。属性值是js代码

js代码会被自动封装到一个function函数的方法体中

例子：<div id="div_id" onclick="fun();">hehe</div>

2. 通过js获取元素对象，再添加事件。

   例子：
   //1.获取元素对象
   var input = document.getElementById("username");
   //2.注册监听
   input.onclick = function(){//alert("hehe");
   }
   

   js中事件的种类：

   焦点事件：针对表单

   ​ onfocus 元素获得焦点。

   ​ onblur 元素失去焦点

   点击事件：

   ​ onclick 当用户点击某个对象时调用的事件句柄。

   ​ ondblclick 当用户双击某个对象时调用的事件句柄。

   键盘事件：

   ​ onkeydown 某个键盘按键被按下。

   ​ onkeyup 某个键盘按键被松开。

   ​ onkeypress 某个键盘按键被按下并松开。

   鼠标事件：

   ​ onmousedown 鼠标按钮被按下。

   ​ onmouseup 鼠标按键被松开。

   ​ onmouseover 鼠标移到某元素之上。

   ​ onmouseout 鼠标从某元素移开。

   ​ onmousemove 鼠标被移动。

   表单事件：

   ​ onsubmit 确认按钮被点击。

   ​ onreset 重置按钮被点击。

   加载与卸载事件

   ​ onload 一张页面或一幅图像完成加载。

   ​ onunload 用户退出页面。 其他浏览器不支持 IE支持

   其他事件：

   ​ 针对表单

   ​ onchange 域的内容被改变。 比如下拉框

   ​ onselect 文本被选中。