JavaScript-09-BOM

一、DOM的概述

1、文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。
2、DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。

二、DOM的结构

当网页被加载时，浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一 个树状结构（DOM Tree）。

三、document 文档对象

1、选取文档元素

1.1 用指定ID选取元素

任何HTML元素都可以有一个id元素，但在文档中该值必须唯一，即同一个文档中的元素不能出现有相同的ID。可以用 Document 对象的getElementById() 方法选取特定ID的元素。

  <div id="div"></div> 
  document.getElementById('div');

1.2 用指定名字选取元素

基于name属性的值选取HTML元素，可以使用 Document 对象的getElementsByName() 方法，返回一个NodeList对象 （类数组对象）。

  <input name="input"/> 
  var inputs = document.getElementsByName('input'); 
  inputs[0].tagName //input

1.3 用指定标签名选取元素

Document 对象的getElementsByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素，也是返回 一个NodeList对象。

document.getElementsByTagName('span') // 选取所有span元素
扩展：给 getElementsByTagName() 传递通配符参数“*”，将获得一个代表文档中所有元素的NodeList对象。

1.4 用指定CSS类选取元素

在HTML文档和HTML元素上，我们可以调用 getElementsByClassName() 来选择指定CSS类的元素，它返回一个实时的 NodeList对象，包含文档或元素所有匹配的后代节点。

  var content = document.getElementsByClassName('content') 
  console.log(content); console.log(content[0]); 
 //访问第一个获取的元素

getElementsByClassName() 只需要一个字符串参数，但是该字符串可以由多个空格隔开的标识符组成，只有当元素的 class属性值包含所有指定的标识符时才匹配。

1.5 通过CSS选择器选取元素

1）querySelectorAll()
Document 对象的方法 querySelectorAll() ，它接受一个CSS选择器的字符串参数，返回一个代表文档中匹配选择器 的所有元素的NodeList对象，并不是实时的。如果没有匹配的元素，则返回一个空的NodeList对象。

document.querySelectorAll('.div') //匹配所有class名为div的元素
2）querySelector()
原理和 querySelectorAll() 是一样的，不过它返回第一个匹配的元素（以文档 顺序），如果没有匹配的元素就返回null。

它们支持复杂的CSS选择器。

  // 选中data-tip属性等于title的元素 
  document.querySelectorAll('[data-tip="title"]'); 
  // 选中div元素，那些class含ignore的除外 
  document.querySelectorAll('div:not(.ignore)');
  注意：但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。

1.6获取根节点

  console.log(document.getRootNode()); //获取根节点

2、创建、插入，删除节点

2.1 创建节点

1）createElement()

创建新的Element节点可以使用Document对象的createElement()方法。给方法传递一个元素的标签名作为参数（对HTML文 档来说该标签名是不区分大小写的）。

var span = document.createElement('span')

2）createTextNode()

创建一个Text节点，参数为所要生成的文本节点的内容。

var newnode = document.createTextNode('content')

3）createAttribute()

生成一个新的属性对象节点，并返回它。参数是属性的名称。

var attr = document.createAttribute('password')
//创建的是一个属性 默认为空值
//给属性对象赋属性值的操作
attr.value = '123456' console.log(attr);

4）cloneNode()

用来复制已存在的节点。每个节点有一个cloneNode()方法，返回该节点的一个全新副本。传递一个可选的布尔值为参数，如果参数true则同时克隆该节点的所有后代节点，否则只克隆该节点，默认为false。

  var cloneDiv = div.cloneNode() //进行元素克隆 
  console.log(cloneDiv); //只会克隆自己 并不会克隆里面包含对应的内容 
  var div1 = div.cloneNode(true) 
  //里面是true的情况表示深度克隆 他会考虑所有的内容包括事件 
  console.log(div1);

四、Element 元素对象

1、获取元素

获取元素 (document的相关方法 element也可以使用)

  var element = document.getElementById('box') 
  console.log(element.getElementsByTagName('img'));

2、 插入元素

我们可以用node的方法 append()、appendChild() 或 insertBefore() 来讲新节点插入到文档中。

1）append()和appendChild()

append 插入任意的子元素到对应的父元素内插入到后面，appendChild接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。

  div.append("hello",content) 

//追加内容到当前元素里面的最后一个元素的后面 追加多个
parentNode.appendChild(newNode)

2）insertBefore()

用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。

parenNode.insertBefore(newNode,oldNode)
注意：调用上面两个方法时，如果要插入的节点是已存在文档中的，那个节点将自动从它当前的位置移除并在新的位置重新插入。

扩展：Node对象并不存在insertAfter方法，如果你要将新节点插入到该节点的后面时，可以这样写：

  function insertAfter(parentNode,newNode,oldNode){ 
      if(oldNode.nextSibling){ 
          parentNode.insertBefore(newNode,oldNode.nextSibling); 
      }else{ 
          parentNode.appendChild(newNode); 
      } 
  }

3、删除和替换元素

1）removeChild()

从文档树中删除一个节点。
注意：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方 法参数传递给它。

  n.parentNode.removeChild(n);

2）replaceChild()

删除一个子节点并用一个新节点替换它。也是在父节点上调用该方法，第一个参数是新节点，第二个参数是需要替代的节点。

  var span = document.createElement('span'); 
  n.parentNode.replaceChild(span,n);

3）replaceChildren()

  用一个元素来替换里面所有的子元素

  div.replaceChildren("hello") //替换所有的子节点 用传入的节点替换里面所有的子节点 
  var content = document.createElement('div') 
  div.replaceChildren(content) //替换所有的子节点 用传入的节点替换里面所有的子节点

4、对属性的操作

1）getAttribute()

  //element.getAttribute(name) 
  box.setAttribute('username','tom') 
  console.log(box.getAttribute('width'));
  //返回对应的值 一般都是string 
  console.log(box.getAttribute('username'));
  //返回对应的值 一般都是string

2）setAttribute()

这个方法接收两个参数：要设置的属性名和属性的值。如果属性已经存在，则 setAttribute()会以指定的值替换原来的值；如果属性不存在，则 setAttribute()会以指定的值创建该属性。

  //element.setAttribute(name,value) 
  //不仅可以操作 后续定义的属性 也可以操作本身就有的属性 
  var box = document.querySelector('div') 
  box.setAttribute('width','100px')

注意：使用 setAttribute()方法设置的属性名会规范为小写形式，比如"ID"会变成"id"。

3）removeAttribute()

不单单是清除属性的值，而是会把整个属性完全从元素中去掉。

  //element.removeAttribute(name) 
  box.removeAttribute('width')

5、属性

5.1 只读属性

1）获取父元素

  // 相关属性 
  var div = document.getElementsByTagName('div')[0] 
  // 获取父元素 
  console.log(div.parentElement);//body

2）获取子元素

  // 获取子元素 
  console.log(div.childElementCount); 
  //子元素个数 
  console.log(div.children); //获取子元素 （伪数组）

3）获取兄弟元素

  // 获取兄弟元素 
  // 前一个兄弟 (pre表示前面的) 
  console.log(div.previousElementSibling);

  // 后一个兄弟 （next表示后面） 
  console.log(div.nextElementSibling)

5.2 所有元素都具备的属性

1）className

  // className 获取对应的class名字 
  console.log(div.className); 
  div.className = 'abc'

2）id

  //id 属性 获取对应的id 
  console.log(div.id); //空值 
  div.id = "box"

3）style

  //元素的其他属性 所有元素都有的属性 
  console.log(div.style); //相当于获取div里面style属性 内嵌样式 对象（只能读取style里面设 置的） 
  console.log(div.style.width); //style里面设置的 100px 
  console.log(div.style.height); //"" 不是style属性设置的不能读取 
  // 可写的属性 style的用户 element.style.样式名 赋值就是给设置 不赋值就是获取 
  div.style.backgroundColor = 'red'

4）title

  //title 标题 
  console.log(div.title); 
  div.title = "hello"

5）name

  // name属性 
  console.log(div.name)

6）tagName（只读）

  //tagName 大写的字符串 只读属性 
  console.log(div.tagName);

7）innerHTML 及 innerText

  //innerHtml 显示的html(所有) innerText 显示的文本（所有的文本） 
  console.log(div.innerHTML); console.log(div.innerText); 
  div.innerHTML = "<b>hello</b>" //解析html代码的 
  div.innerText = "<b>hello</b>" //不会解析html代码的

8）attributes 获取所有的属性节点 （返回的是一个NameNodeMap）

  console.log(ele.attributes);//nameNodeMap 伪数组 (key:value) 迭代器 
  console.log(ele.attributes.length) 
  //访问 
  console.log(ele.attributes[0]) //属性节点对象 
  console.log(ele.attributes['href'].nodeValue) 
  console.log(ele.attributes['href'].value) 
  for(var key in ele.attributes){ //字符串 
          console.log(ele.attributes[key]); 
  }
  // nameNodeMap的方法getNameItem setNameItem removeNameItem item 
  //其中一个属性对象 
  console.log(ele.attributes.getNamedItem('hello')); //设置 
  var attr1 = document.createAttribute('abc') //属性节点 
  attr1.value = 'bca' 
  ele.attributes.setNamedItem(attr1) 
  //remove属性 
  ele.attributes.removeNamedItem('href') 
  // item 获取属性对象 
  console.log(ele.attributes.item(0));

9）每个元素默认带的属性 都可以通过对应的元素直接点出来

  //所有元素对于本身自带属性都直接点出来 
  var input = document.querySelector('input') 
  console.log(input.placeholder); 
  input.placeholder = "请输入" 
  console.log(input.value); 
  console.log(input.type); 
  var a = document.querySelector('#a') 
  console.log(a.href); 
  var img = document.querySelector('img') 
  console.log(img.src);

六、节点操作

1、节点分类

• 元素节点 （element）
• 属性节点 （attribute）
• 文本节点 （text）

2、节点相关属性

• parentElement 父元素（只能是element）

• parentNode 父节点 （一般也是element）

• childNodes 子节点 （伪数组 （nodeList）文本节点及元素节点）

• children 子元素节点 （HTMLCollection element）

• previousElementSibling 上一个兄弟元素节点 （element 元素节点）

• previousSibling 上一个兄弟节点 （文本节点 元素节点）

• nextElementSibling下一个兄弟元素节点 （element 元素节点）

• nextSibling 下一个兄弟节点 （文本节点 元素节点）

• lastChild 最后一个子节点 （文本节点 元素节点）

• firstChild 第一子节点 （文本节点 元素节点）
  注意：一般形式下 只有删了空文本节点才进行第一个和最后一个的获取。空文本空格换行及制表符都是空文本节点。

  var ul = document.querySelector('ul') 
  for(var i=0;i<ul.childNodes.length;i++){
           if(ul.childNodes[i].nodeType == 3 && /^\s+$/.test(ul.childNodes[i].nodeValue)){ 
                  //删除子节点 
                  ul.removeChild(ul.childNodes[i]) 
          } 
  }
  console.log(document.querySelector('ul').firstChild); 
  console.log(document.querySelector('ul').lastChild);
  

3、节点分类的区分属性

nodeType 节点类型 （1表示元素节点 2表示属性节点 3表示文本节点）
nodeValue 节点值 （元素节点的节点值获取不到（null） 属性节点的节点值 属性值 文本节点 文本内
容）
nodeName 节点名 （元素节点的节点就是标签名 属性节点的节点名就是属性名 文本节点 #text）

  var tagA = document.createElement('a') //元素节点 
  tagA.innerHTML = "hello" 
  var attr = document.createAttribute('name') //属性节点 
  attr.value = '张三' 
  var text = document.createTextNode('你好') //文本节点 
  //nodeName 节点名 元素的节点名是大写的 属性节点节点名小写 文本节点都是#text （只读属性） 
  console.log(tagA.nodeName,attr.nodeName,text.nodeName);// A name #text 
  console.log(tagA.nodeType,attr.nodeType,text.nodeType);// 1 2 3 
  console.log(tagA.nodeValue,attr.nodeValue,text.nodeValue);// null 张三 你好

4、相关的方法

• cloneNode 方法 （克隆所有节点）
• append 添加节点
• appendChild 添加节点
• replaceChild 替换节点
• replaceChildren 替换所有的子节点
• insertBefore 插入节点
  removeChild 移除子节点

5、属性节点操作的相关方法

• setAttributeNode 设置属性节点

• getAttributeNode 获取属性节点

• removeAttributeNode 删除属性节点

  //setAttributeNode getAttributeNode removeAttributeNode 
  console.log(ele.getAttributeNode('abc')); //返回属性节点对象 
  var attr2 = document.createAttribute('abc') //属性节点 
  attr2.value = '123456' 
  ele.setAttributeNode(attr2) //同样的属性名会被覆盖 
  var attr3 = document.createAttribute('abc') //属性节点 
  attr3.value = '123456' 
  //由于attr3和attr2不是一个对象 所有他的地址不一样 所以比对不成功所 以不能被删除 
  // var attr3 = attr2 //attr3的地址和attr2的是一样这个时候就可以删除了 
   ele.removeAttributeNode(attr3) //删除对于的属性节点
  

七、this 调用者是谁就指向谁

  //生成对应的元素 加入某个地方 //个数 标签名 父元素 
  var arr = [0,1,2,3,4,5,6,7,8,9,'+',"-","*",'/'] 
  function initElement(tagName,parent,valueArr){ 
          for(var i=0;i<valueArr.length;i++){ 
                  var element = document.createElement(tagName)       
                  element.innerText = valueArr[i]   
                  parent.appendChild(element) 
          } 
  }
  var box = document.querySelector('div') 
  initElement('button',box,arr) //dom操作会影响页面的渲染速度（重复多次的渲染）（重绘和回流） 
  //获取所有的按钮 
  var btns = document.querySelectorAll('button') 
  //遍历这个按钮组 
  for(var i=0;i<btns.length;i++){ 
          btns[i].onclick = function(){ 
          // console.log(i); 14 
          // console.log(btns[i].innerText); 
          console.log(this.innerText); //指向对应的点击的按钮 
          } 
  }
  //点击事件是异步 先走同步 再走异步 //