Dom和Bom

1.什么是DOM：

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 交互的API文档。DOM 是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。

DOM 是Web——万维网上使用最为广泛的API之一，因为它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。

DOM 并不是天生就被规范好了的，它是浏览器开始实现JavaScript时才出现的。这个传统的 DOM 有时会被称为 DOM 0。现在， WHATWG维护DOM生活标准。

 

 2.什么是bom：

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM

DOM包含：window

 

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links


3.BOM的一些使用：

1.对节点的增删改查：

一.查：

 1. 查看元素节点：

     注：没加s，都代表一个，加了s，都代表类数组，用数组的方式获取每一个[0],使用，.length获取数组长度，代表html第一个，[1]代表html中的第二个，比如  

1. document代表整个文档

        注：使用这些方法都要以document.获取方法

1. document.getElementById() //元素id在ie8以下的浏览器，不区分id  大小写，而且也返回匹配name元素的属性

       

3  .getElementsByTagName() ;//标签名

       注：把html中所有你选择的标签一样的标签，所以才加了s，菜不代表一个

 4  .getElementsByName(); 需注意，只有部分标签name可生效(表单，表单元素，img，iframe)

5  .getElementsByClassName()//类名->ie8和ie8 以下的ie版本中可以多个class一起

注：这个不是一个哦！还是整个【0】；

1. .querySelector() //css选择器 在ie7和ie7以下版本中没有

        2..querySelectorAll() //css选择器 在ie7和ie7以下版本中没有

 

遍历节点树：

      parentNode ->父节点（最顶端的parentNode为#document）;

         chiledNodes ->子节点们

         firstChild ->第一个子节点

         LastChild ->最后一个子节点

         NextSibling ->后一个兄弟节点  previousSibling _>前一个兄弟节点

          

节点的四个属性：

   1 NodeNmae

   元素的标签名，以大写形式表示，只读

    2.nodeValue

Text节点或Comment节点的文本内容，可读写

3.nodeType

该节点类型，只读

4.attributes

4.Element节点的属性集合

 

事件：

获取：

（以下用div变量为代表做列子）

1. 绑定事件处理函数：

比如：div.onxxx=function{}（这个xxx代表事件类型：on+事件类型）

 

1. 行间，在html中写：onxxx=“执行语句”

 

  3.div.addEventListener(事件类型，处理函数（可以是外带一个的函数的函数名名），false)

  注释：一个事件可以绑定多个处理程序

  或者

  如果这里是test(),不用点就会触发

 

   绑定多个函数：

 4.obj.attachEvent（‘on+xxx’,函数）  注：IE浏览器特有

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

DOM方法：

1.

一：获取和修改标签属性：

1.获取标签元素的属性：

0bject.getAttribute（‘属性’）;

2.修改标签元素的属性：  

0bject.setAttribute（‘属性’,value）;

例如：

Html:

 

Js:

 

 

 

1. 绑定标签
2. 记住classname绑定是加了s，所以使用数组的方法，获取元素属性并打印
3. 修改标签title属性
4. 打印修改后的元素属性

 

结果:

  

 

二：打开新窗口：

window.open(url，name，features) //后面俩个属性可以不要

 

2.

1. 创建元素：

  createElement方法：document.createElement(NodeName)

  查看节点名称：nodeName； 返回的是字符串，比如p，body....

  查看节点类型：nodeType； 返回的是数字

1. 创建文本节点：

   createTextNode方法：document.createTextNode(text)

1. 设置元素位置：

   appendChild方法：节点.appendChild（child）

 

Html:

   

JavaScript：                       

 

em元素插入到div元素中        给em元素添加文本节点       

结果：