JavaScript——DOM补充

一、什么是DOM？

document object model（文档对象模型）

DOM是W3C（万维网联盟）的标准，是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

对网页进行增删改查的操作。

HTML DOM 模型被结构化为对象树：

通过这个对象模型，JavaScript 可以完成一下工作：

• JavaScript 能改变页面中的所有 HTML 元素
• JavaScript 能改变页面中的所有 HTML 属性
• JavaScript 能改变页面中的所有 CSS 样式
• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件作出反应
• JavaScript 能在页面中创建新的 HTML 事件

DOM API：

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。

在 DOM 中，所有 HTML 元素都被定义为对象。

API是每个对象的属性和方法。

属性是能够获取或设置的值（就比如改变 HTML 元素的内容）。

方法是能够完成的动作（比如添加或删除 HTML 元素）。

常见的dom操作：

1.查找节点

2.读取节点信息

3.修改节点信息

4.创建新节点

5.删除节点

HTML DOM Document 对象：

文档对象代表当前浏览器窗口中的网页。

如果希望访问 HTML 页面中的任何元素，那么总是从访问 document 对象开始。

节点类型：

根据W3C标准规范，DOM 树中的节点分为12种类型。其中常用的节点类型是文档、元素、属性、文本和注释5种。

二、DOM查找

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素
document.querySelectorAll(selector)	通过CSS选择器查找元素

1.按id属性，精确查找一个元素对象

var elem = document.getElementById("id");

效率非常高

**强调：**getElementById只能用在document上（格式固定）

**何时：**只用于精确查找一个元素

**问题：**不是所有元素都有id

举例：

<ul id="myList">
	<li id="m1">首页</li>
	<li id="m2">内容</li>
	<li id="m3">好的</li>
</ul>	

找到id为myList的元素

var ul = document.getElementById('myList');
console.log(ul);

2.按标签名查找

var elems = parent.getElementsByTagName("a");

查找指定parent节点下的所有标签为a的子节点

**强调：**1.可用在任意父元素上

​ 2.不仅查直接子节点，而且查所有子代节点

​ 3.返回一个动态集合

​ 即使只找到一个元素，也返回集合。如果要调，必须用[0]，取出唯一的元素

**问题：**不但找直接，而且找所有子代

举例：

 <ul id="myList">    
     <li id="m1">首页</li>    
     <li id="m2">内容</li>    
     <li id="m3">好的</li>
</ul>   

找到标签为

• 的所有元素

• var lis = document.getElementById("myList").getElementsByTagName("li");
  console.log(lis);
  

  3.通过name属性查找

  document.getElementsByName("name属性")
  

  可以但会DOM树中具有指定name属性值的所有子元素集合。

  举例：

  <form id="registerForm">
      <input type="checkbox" name="boy"/>
      <input type="checkbox" name="boy"/>
      <input type="checkbox" name="boy"/>
  </form>
  

  var list = document.getElementsByName("boy");
  console.log(typeof(list));
  

  4.通过class查找

  查找父元素下指定class属性的元素

  var elems = parent.getElementsByClassName("calss");
  

  有兼容性问题：IE9+

  举例：

  <div id="news">
      <p class="mainTitle">新闻标题1</p>
      <p class="subTitle">新闻标题2</p>
      <p class="mainTitle">新闻标题3</p>
  </div>
  

  var div = document.getElementById("news");
  var list = div.getElementsByClassName("mainTitle");
  console.log(list);
  

  5.通过css选择器查找

  元素选择器
  类选择器
  Id选择器
  后代选择器
  子代选择器
  群组选择器

  5.1.只找一个元素

  var elem = parent.querySelector("selector");
  

  **强调：**selector支持一切css中选择器

  ​ 如果选择器匹配的有多个，只返回第一个

  5.2.找多个元素

  var elems = parent.querySelectorAll("selector");
  

  **强调：**selector API返回的是非动态集合

  三、DOM修改

  方法	描述
  element.innerHTML = new html content	改变元素的 inner HTML
  element.attribute = new value	改变 HTML 元素的属性值
  element.setAttribute(attribute, value)	改变 HTML 元素的属性值
  element.style.property = new style	改变 HTML 元素的样式

  1.DOM标准

  **核心DOM：**可操作一切结构化文档的API，包括HTML和XML。万能！繁琐！

  **HTML DOM：**专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行了简化。不是万能的！简单！

  **开发：**先用简单的，再用复杂的补充——以实现效果为目标。

  2.核心DOM：4个操作

  2.1.读取属性值：2种（了解）

  ​ 1.先获得属性节点对象，再获得节点对象的值：

  var attrNode=elem.attributes[下标/属性名]；
  var attrNode=elem.getAttributeNode(属性名)
  
  attrNode.value;//属性值
  

  ​ 2.直接获得属性值

  var value = elem.getAttribute("属性名")；
  

  2.2.修改属性值

  elem.setAttribute("属性名",value);
  

  value指的是你想给这个属性值修改为什么样的值

  举例：

  var h1 = document.getElementById("a1");
  h1.setAttributeNode("name",zhangjie);
  

  先获取id为a1的元素，保存在变量h1中。

  然后直接用h1调用setAttributeNode方法，获取到name，然后修改名字。

  2.3.判断是否包含指定属性

  var bool = elem.hasAttribute("属性名");
  

  elem.hasAttribute(“属性名”) //true或者false

  举例：

  判断id为bt1的元素中是否有onclick属性

  document.getElementById("bt1").hasAttribute("onclick");
  

  2.4.移除属性

  elem.removeAttribute("属性名");
  

  举例：

  <a id="alink" calss="slink" href="javascript:void(0)" onclick="jump()">百度搜索</a>
  

  var a = document.getElementById("alink");
  a.removeAttribute("class");
  

  找到id为alink的元素，调用removeAttribute方法移除class属性。

  3.修改样式

  **内联样式：**elem.style.属性名

  **强调：**属性名：去横线，变驼峰

  **比如：**css：background-color => backgroundColor

  ​ list-style-type => listStyleType

  四、DOM添加

  方法	描述
  document.createElement(element)	创建 HTML 元素
  document.removeChild(element)	删除 HTML 元素
  document.appendChild(element)	添加 HTML 元素
  document.replaceChild(element)	替换 HTML 元素
  document.write(text)	写入 HTML 输出流

  1.添加元素的步骤

  ​ 1.创建空元素

  ​ 2.设置关键属性

  ​ 3.将元素添加到DOM树

  2.创建空元素

  var elem = document.creatElement("元素名");
  

  举例：

  var table = document.createElement("table");
  var tr = document.createElement("tr");
  var td = document.createElement("td");
  var td = document.createElement("td");
  
  console.log(table);
  

  3.设置

  3.1.设置关键属性

  a.innerHTML = "go to tmooc";
  a.herf = "http://tmooc.cn";
  

  那么输出的时候，a为：

  <a href = "http://tmooc.cn">go to tmooc</a>
  

  3.2.设置关键样式

  a.style.opacity = "1";
  a.style.cssText = "width:100px;height:100px";
  

  4.将元素添加到DOM树

  4.1.追加最后一个子节点

  parentNode.appendChild(childNode);
  

  可用于将为一个父元素追加最后一个子节点

  举例：

  var div = document.createElement("div");
  var txt = document.createTextNode("版权声明");
  

  新建两个元素

  div.appendChild(txt);//将txt内容放到div里面去
  document.body.appendChild(div);//将创建好的div放在body里面
  

  4.2.指定子节点之前添加一个新的子节点

  parentNode.insertBefore(newChild,existingChild);
  

  用户在父元素中的指定子节点之前添加一个新的子节点

  举例：

  <ul id = "menu">
      <li>首页</li>
      <li>内容</li>
  </ul>
  

  var uls = document.getElementById("menu"); //找到id为menu的元素：ul，保存在变量uls里边
  var newLi = document.createElement("li");//创建了一个li，保存在变量newLi里面
  
  ul.insertBefore(newLi,ul.lastChild);//将newLi添加到ul元素中最后一个儿子之前
  

  4.3.添加元素优化

  尽量少的操作DOM树

  为什么？每次修改DOM树，都导致重新layout

  1.如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面。

  2.如果只添加多个平级子元素时，就要将所有子元素，临时添加到文档片段中。再将文档片段整体添加到页面。

  **文档片段：**内存中，临时保存多个平级子元素的虚拟父元素用法和普通父元素完全一样。

  如何：

  1.创建片段

  var frag = document.createDocumentFragment();
  

  2.将子元素临时追加到frag中

  frag.appendChild(div);
  

  3.将frag追加到页面

  parent.appendChild(frag);
  

  **强调：**append之后，frag自动释放，不会占用元素

  5.添加事件处理程序

  方法	描述
  document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

  五、查找 HTML 对象

  属性	描述	DOM
  document.anchors	返回拥有 name 属性的所有 元素。	1
  document.applets	返回所有 元素（HTML5 不建议使用）	1
  document.baseURI	返回文档的绝对基准 URI	3
  document.body	返回 元素	1
  document.cookie	返回文档的 cookie	1
  document.doctype	返回文档的 doctype	3
  document.documentElement	返回 元素	3
  document.documentMode	返回浏览器使用的模式	3
  document.documentURI	返回文档的 URI	3
  document.domain	返回文档服务器的域名	1
  document.domConfig	废弃。返回 DOM 配置	3
  document.embeds	返回所有 元素	3
  document.forms	返回所有 元素	1
  document.head	返回 元素	3
  document.images	返回所有 元素	1
  document.implementation	返回 DOM 实现	3
  document.inputEncoding	返回文档的编码（字符集）	3
  document.lastModified	返回文档更新的日期和时间	3
  document.links	返回拥有 href 属性的所有 和 元素	1
  document.readyState	返回文档的（加载）状态	3
  document.referrer	返回引用的 URI（链接文档）	1
  document.scripts	返回所有

  六、示例代码：水果列表

  要求：

  1. 通过文本框输入水果添加到页面中的列表中。
  2. 从列表中删除文本框中指定的水果。
  3. 修改列表中指定水果的信息。

  

  代码：