JavaScript 的DOM对象「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」。.BO

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」。

1.BOM 浏览器对象模型
- a.screen 指的不是浏览器的宽度，指的是整个电脑屏幕的分辨率
  - 可以拿到屏幕可用分辨率
- b.navigator
  - 可以通过userAgent判断当前浏览器信息
- c.location
  - URL：统一资源定位符 Union Resource Location
  - 可以通过href属性重定向（改变）页面的URL，进行页面跳转
- d.history
  - go方法能够让我们进行历史回退或者前进
- e.frames
```
获得当前窗体的子页面（`iframe`）
```
- f.document
  - DOM模型的核心对象
所有的DOM对象都是在堆内存创建的都是有一个构造器生成的
查看对象的构造器器方法：
- step1：查看标签的对象以及构造器var body = document.body;console.log(body.toString())
- step2：查看对象是否是这个构造器创建出来的 console.log(body instanceof HTMLBodyElement)

新知识点：

1.DOM 文档对象模型

document

功能
- getElementById：通过传入的ID，返回标识了这个ID的唯一对象的内存地址
- getElementsByTagName:通过传入的标签名字，返回所有该标签对象（HTMLCollection）
- getElementsByClassName:通过类的名字，返回所有该类的元素对象（HTMLCollection）
- createElement:想要创建出来的元素能够绘制在页面中，那么它必须在DOM树中
  - 总结 document对象是DOM原型的核心对象，它是内存DOM树的根，所以它提供了很多功能让我们快速的找到DOM树中的某些DOM节点（对象）

`element`

功能方法：（自定义属性非常灵活好用）
- setAttribute/getAttribute //getAttribute获取标签的属性 –用来操作标签的属性
- setAttribute设置标签的属性
- appendChild:添加子元素
属性：
- id
- className，style
- name,value(只有表单元素有其他是没有的)
- href,src…(对应的元素)
- innerHTML/innerText innerText返回文本信息
- children://子元素集合
- parentNode//父元素

总结：元素的功能属性直接可以通过元素对象点出来，除此意外的自定义属性，请通过get/setAtribute去操作

DOM 操作：

图片切换的相册效果
tab切换效果
表单验证
特效就是DOM操作的具体应用 DOM操作就是用js来写HTML代码
节点/元素/标签：
- 三种常用的节点类型：
  - 元素节点
  - 属性节点
  - 文本节点

操作DOM对象：

修改：–找到这个节点
删除：–找到这个节点
添加：–先造出一个节点然后插入插入到哪里？找节点来定位
这些都离不开节点的查找

节点的查找：（最重要）

1、document.getElementById—根据id查找节点 [返回的是节点本身]
2、document.getElementsByTagName–根据标签名字来查找[返回的是数组]document.getElementsByTagName[i]
3、document.getElemenstByName–根据name属性来查找节点（一般用在表单中）[返回的是数组]document.getElemenstByName[i]

注意：早期浏览器都认为name只出现在表单中
因此document.getElemenstByName只对表单中的元素发挥作用后来部分浏览器把Name属性扩展到一般的元素如：div 但是IE浏览器还是只能对表单使用byName因此处于兼容性我们只能对表单使用byName

`DOM`中查找节点的思路：（由大到小个别情况由子到父）

由大到小：（通过下面的来定位）
- 1、document.getElementById—根据id查找节点 [返回的是节点本身]
- 2、document.getElementsByTagName–根据标签名字来查找[返回的是数组]document.getElementsByTagName[i]
- 3、document.getElemenstByName–根据name属性来查找节点（一般用在表单中）[返回的是数组]document.getElemenstByName[i]
如果还没有查到自己想要的节点，还可以继续根据上面已经找到的节点再次定位来查找
怎么继续定位？
- 答：childNodes/child

继续查找：

1、查找子元素 children[index]/childNodes
2、查找父元素 node.parentNode –>获取父元素
3、查找兄弟元素 nextSibling previousSibling
4、nextSibling previousSibling firstChild lastChild这四个属性容易受到空白文本的影响 建议不用

//============给Object原型加一个方法 消除文本节点对DOM操作的影响 例如：nextSibling` `previousSibling` `firstChild` `lastChild （受到换行 和文本节点影响）

Object.prototype.next = function(){
  //NodeType == 3 text的代号
  //NodeType == 1 tag的代号
  if(this.nextSibling){//判断下一个兄弟节点是否存在
  switch(this.nextSibling.nodeType){
    case 1:
      return this.nextSibling;
    case 3:
      return this.nextSibling.nextSibling;
  }
}else{
  return null;
}
console.log(div1.next().next().innerText);

5、对于查到的某个元素里面的子元素非常多这时候还可利用getElementsByTagname进一步筛选
注意对于元素对象和document对象相比元素对象只能利用getElementsByTagName函数其他两个不能用

节点查找也是通过由大到小来定位：找到大的元素进一步细化完全可以找到页面上任意一个元素控制他
子元素不好找就找他的父元素
要过滤空白文本节点，用children取他的文本节点

DOM与节点的关系：

node:
- childNodes[]
- parentNode
- firstChild
- getElementsByTagName('元素标签')
- lastchild
- nextSibling
- previousSibling
- children[index] children 不是w3c标准但是各大浏览器兼容性很好

通过给原型添加方法在元素后面创建标签
启示：在项目中，很多很多地方都需要一个方法但是系统没提供，这时可以通过原型扩展

//var p = document.createElement('p');
//p.innerHTML = "this is a p";
//var child = document.getElementsByTagName('div');

//给Div的HTMLDivElement构造器原型加一个创建元素的方法 要所有的元素都有这个方法 改成 Object
HTMLDivElement.prototype.createElement = function(tagName){
  var child = document.createElement(tagName);
  this.appendChild(child);
  return child;
}
var child = document.getElementsByTagName('div')[2].createElement("p");
child.innerHTML = 'pppppp';

DOM属性小结

Attributes 存储节点的属性列表(只读)
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition 以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue存储节点值(可读写)
nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)
parentNode返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)
url返回最近载入的XML文档的URL(只读)
Xml 返回节点及其后代的XML表示(只读)

DOM方法小结

cloneNode 返回当前节点的拷贝
createAttribute 创建新的属性

节点操作DOMDocument属性和方法
- createCDATASection 创建包括给定数据的CDATA段
- createComment 创建一个注释节点
- createDocumentFragment 创建DocumentFragment对象
- createElement_x_x 创建一个元素节点
- createEntityReference 创建EntityReference对象
- createNode 创建给定类型,名字和命名空间的节点
- createPorcessingInstruction 创建操作指令节点
- createTextNode 创建包括给定数据的文本节点
- getElementsByTagName返回指定名字的元素集合
- hasChildNodes 返回当前节点是否有子节点
- insertBefore在指定节点前插入子节点
- Load导入指定位置的XML文档
- loadXML 导入指定字符串的XML文档
- removeChild 从子结点列表中删除指定的子节点
- replaceChild从子节点列表中替换指定的子节点
- Save 把XML`文件存到指定节点
- selectNodes 对节点进行指定的匹配,并返回匹配节点列表
- selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
- transformNode 使用指定的样式表对节点及其后代进行转换
- transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
- document.documentElement返回文档的根节点
- document.activeElement 返回当前文档中被击活的标签节点
- event.fromElement 返回鼠标移出的源节点
- event.toElement返回鼠标移入的源节点
- event.srcElement 返回激活事件的源节点
- node.parentNode,node.parentElement 返回父节点
- node.childNodes 返回子节点集合（包含文本节点及标签节点）
- node.children 返回子标签节点集合
- node.textNodes 返回子文本节点集合
- node.firstChild返回第一个子节点
- node.lastChild 返回最后一个子节点
- node.nextSibling返回同属下一个节点
- node.previousSibling 返回同属上一个节点
- node.a(oNode) 追加子节点：
- node.applyElment(oNode,sWhere)
- sWhere有两个值：outside / inside 应用标签节点
- node.insertBefore()
- node.insertAdjacentElement()
- node.replaceAdjacentText()
插入节点
- node.remove()
- node.removeChild()
- node.removeNode()
删除节点
- node.replaceChild()
- node.replaceNode()
- node.swapNode()
替换节点
- node.cloneNode(bAll)返回复制复制节点引用
- node.contains() 是否有子节点
- node.hasChildNodes()是否有子节点

JavaScript 的DOM对象

新知识点：

1.DOM 文档对象模型

document

element

DOM 操作：

操作DOM对象：

节点的查找：（最重要）

DOM中查找节点的思路：（由大到小 个别情况 由子到父）

继续查找：

DOM与节点的关系：

DOM属性小结

DOM方法小结

`element`

`DOM`中查找节点的思路：（由大到小个别情况由子到父）