JAVAWEB第五天DOM

## DOM简单学习：为了满足案例需求
*功能：控制tml文档的内容
*代码 ：获取页面标签（元素）对象E；emrnt
 *document.getElementById（“id值 ”）
因此   需要给某些元素添加ID属性
操作Element对象：
    1.修改属性值：
    *1.明确获取的对象 是 哪一个
    *2.查看API文档找其中 有哪些 属性 需要修改。
    2.修改元素标签值：
    **1.先 获取对象    
    *2.属性：innerHTML修改标签名
##事件：功能：某些组件 被执行了某些操作后 出发某些代码的执行
如何绑定事件：
1.直接在html标签上直接指定事件的属性 属性值就是JS代码
2.通过 JS获取元素对象 指定事件属性  设置一个函数
##BOM：
概念：将浏览器的 各个组成部分封装成对象。
组成：window：窗口对象
screen:显示器屏幕对象
Navigator:浏览器对象
History:历史记录对象
1.创建（获取）
history
2.方法：
back(); 后退
forward（）；前进
go（参数）；后退或者前进
参数：正数  前进几个历史记录
负数  后退几个 历史记录
3.属性
length：返回当前窗口历史列表的URL

Location：地址栏对象
1.创建（获取）：
window.location
2方法：reload（） 重新加载该文档
3.属性：href：设置或返回完整的hrl

***window：窗口对象：
1.创建
2.方法：
**①与弹出窗口有关的方法：
alert（）；alert（）；弹出一个对话框和一个确定按钮 --警告框
confirm（）；显示带有一段消息以及确认按钮和取消按钮的对话框。
***如果用户点击确定按钮 则返回true
如果用户点击取消按钮  则返回false
prompt（）；显示可提示用户输入的对话框。
****
②与打开和关闭有关的方法：
close：关闭浏览器窗口
close代表的是当前的窗口  谁调用关谁
可以吧开启的那个创建一个返回值 这样就可以直接关掉他就行了
open：打开一个新窗口
**与定时器有关的方法：
settimeout：开启计时器
clearTimeout:关闭
setInterval：循环计时器
clearInterval：关闭循环计时器

参数 ：JS代码或者方法对象
2.毫秒值：
返回值；卫衣表示 用于取消定时器
3.属性：
1.获取其他BOM对象：history  lovation Navigator Screen
获取DOM对象:
document

4.特点：window对象不需要创建 可以直接使用window使用 window.方法名（）；
window引用可以是方法名（）；

#DOM：概念：Document object Model文档对象模型
将标记语言文档的各个组成部分 封装为对象 可以使用这些对象，对标记语言文档进行CRUD的动态操作
Core（核心） DOM - 所有文档类型的标准模型：
**Document:文档对象
Element:元素对象
Attribute：属性对象
Text:文本对象
Comment:注释对象
Node：节点对象 其他五个的父对象

XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

主要学习：
Document:文档对象
****
1.创建：在htmldom模型中可以使用window对象来获取
window.document
document
2.方法 ：
①获取 Element对象
1.getElementById（）：根据ID属性值获取元素对象  id属性值一般唯一
2.getElementsByTagName（）：根据元素名称获取元素对象。返回值是一个数组
3.getElementByClassName（）；根据Class的属性值获取元素对象们 返回值是一个数组
4.getElementByName();:  根据name属性值获取元素对象们.

②.创建其他对象
createAttribute（name）：
createComment（）：
createElement（）：
createTextName（）：

3.属性：

****
Element:元素对象
****
获取 通过document来获取和创建
方法：removeAttribute（）：删除属性
    setAttribute（）：添加属性

****
Node：节点对象 其他五个的父对象
特点：所有DOM对象都可以被认为是一个节点
方法"CRUDdom树：
appendChild（）：；向节点的子节点列表的结尾添加新的 子节点
removeChild（）：；删除并返回当前节点的 指定子节点
replaceChild：替换 子节点
超链接有两个 功能：1.可以被点击 ：样式
            2.点击后跳转到href指定的url
需求；保留1功能 去掉2功能
实现：href="javascrip:void(0)"
Node属性：parentNode：返回节点的父节点。

HTML DOM：
1.标签题的设置和获取：innerHTML
直接var table = document.getElementsByTagName（“table”）[0]
table.innerHTML +="<tr>\n"+
"<td>"+id+"</td>\n"  +
"</tr>
2.使用html元素对象的属性
3.控制样式：
使用元素的style属性来设置：div.style.border=“1px solid  red”
div.2.className=“d1”
提前定义好累选择器的样式，通过元素的ClassName属性来设置class的属性