JS 基础（一）：DHTML、DOM、BOM

---

一、DHTML

DHTML Dynamic Hyper Text Markup Language 动态超文本标签语言

1.1 概述

我们学习JS技术时，提到过，JS本身是一门和运行环境无关的独立的语言，浏览器是其最常见的运行环境。

既然JS是一门和运行环境无关的独立的语言，我们又如何通过这么语言去操作浏览器及其中展示的页面呢？

为了解决这个问题W3C提出来了DHTML即动态HTML技术。

所谓的DHTML起始就是在原有的html基础上，提供js访问的接口，允许使用js访问和操作HTML元素（HTML和js结合在一起使用的技术—DHTML）。
DHTML可以将HTML内每个标签元素看做成js对象

现代的主流浏览器都支持DHTML，所以我们只要学习DHTML相关的技术，就可以在任意主流浏览器中通过JS技术操作HTML页面了。

页面中的HTML元素会变成js文档树。通过DHTML技术技术操作HTML页面中标签元素，其实就是操作文档树身上的对象

对于js对象操作可以有增删改查

1.2 DHTML分类

分为BOM(Browser Object Model)和DOM（Document Object Model）

二、DOM：文档对象模型

• 用来操作文档(页面元素)
• 节点对象:JavaScript 会对 html 文档中的元素、属性、文本甚至注释进行封装,提供相关的属性和方法。
• 分类：元素节点操作标签；属性节点操作标签属性；文本节点操作标签的文本内
• 属性值:以字符串表示;class属性需要更名为 className，避免与关键字冲突，例
• 操作元素样式:属性值以字符串形式给出，单位不能省略;如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize
• 修改属性
  elem.getAttribute("attrname");//根据指定的属性名返回对应属性值elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值
  elem.removeAttribute("attrname");//移除指定属性

2.1 获取页面中的节点（标签元素）

方法	描述
document.getElementById()	通过id获取页面中的元素
document.getElementsByName()	通过name获取页面中的元素
document.getElementsByTagName()	通过元素名获取页面中的元素
innerText	设置或获取元素身上的文本内容
innerHTML	设置获取获取元素身上的HTML内容

2.2 对页面中节点进行增删改

2.2.1 新增节点

方法	描述
document.createElement(“div”)	创建div节点（标签）
document.createAttribute(“href”);	创建节点（标签）属性
parent_div.appendChild(new_div)	挂载节点:获取父节点，根据父节点调用方法来挂载节点
parent_div.insertBefore(new_div,div_4)	插入节点:获取父节点以及要插入节点
childNode.removeNode();	直接移除自己,但是只是移除自己,子孙不移除
childNode.removeNode(true);	传入一个true表明在删除自己的同时,子孙也被移除

2.2.2 删除节点

获取要删除的节点以及父节点:parent_div.removeChild(div_3);

2.2.3 修改节点

获取要修改的节点以及父节点:parent_div.replaceChild(new_div,div_2);

2.2.4 克隆节点

获取要克隆节点
不写布尔值就是false，只复制指定节点不复制子节点
布尔值weitrue表明不仅要复制指定节点还有去复制子节点
var ele2 = ele.cloneNode();//只克隆当前元素
var ele2 = ele.cloneNode(true);//克隆当前元素包括子元素

2.2.5 凭空创建节点

var tag = document.createElement("tagName");
var attr = document.createAttribute("href");
设置属性
tag.setAttributeNode(attr);

2.1 实例1：给标题3标签中添加内容

<input id= 'search'  type="text" >
<button id="btn1">add</button>
<h3 id="show" style="margin: 0;"></h3>


<script>
       var  content = document.getElementById('search')
       var  btn1 = document.getElementById('btn1')
       var  h1 = document.getElementById('show')
       btn1.onclick = function(){
     h1.innerText=content.value}
</script>   

2.2 实例2：创建对象

<span style="margin: 10px 40px;">var object = {name:'zhaohe',age:26}</span><br>
<span style="margin: 10px 40px;">document.write(object.name)</span><br>
<span style="margin: 10px 40px;">document.write(`${object.age}`)</span><br>
<span style="margin: 10px 40px;">document.write(object["name"])</span><br>
<span style="margin: 10px 40px;">for(var i in object){console.log(i,object[i])}</span><br>
<button onclick="create()">创建对象