JS-DOM操作与BOM

JS-DOM操作与BOM

1 webapi介绍

1.1 api概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()

任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())

1.2 webapi概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
我们可以通过API去操作DOM和BOM
此处的web API特指浏览器提供的API(一组方法)，web API在后面的课程中有其它含义

1.3 JS组成

ECMAScript

DOM

BOM

2 DOM概念

事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM又称为文档树模型

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签(元素)的属性

模拟文档树结构

3 获取元素的方式

3.1 通过id获取元素

  var div1 = document.getElementById("box1");

3.2 通过类名获取元素

 var p1Arr = document.getElementsByClassName("p1");
console.log(p1Arr instanceof Array);//false
  console.log(Array.isArray(p1Arr));//false
  console.log(p1Arr.length);
  console.log(p1Arr[0]);
  console.log(p1Arr[1]);

伪数组定义：

1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法
伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组
常见的参数的参数 arguments，DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）

/*  p1Arr.push(100);
   console.log(p1Arr); */
  /*  p1Arr.forEach(function (value, index) {
     console.log(value);
   }) */

3.3 通过标签名获取元素

var tag1 = document.getElementsByTagName("div");
   console.log(tag1);
   console.log(tag1[0]);

3.4 通过name名获取元素

 var userList = document.getElementsByName("user");
  console.log(userList);
  for (var i = 0; i < userList.length; i++) {
    console.log(userList[i]);
  }

3.5 通过选择器的querySelector获取元素

  //获取指定选择器的第一个元素，参数就是选择器的名称
  var div1 = document.querySelector(".box1");
  console.log(div1);
  var li1 = document.querySelector("ul>li");
  console.log(li1);
  var user_1 = document.querySelector("#user_1");
  console.log(user_1)

3.6 通过选择器的querySelectorAll获取元素

//querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名 //称
 var boxList = document.querySelectorAll(".box1");
  console.log(boxList);
  var listLi = document.querySelectorAll("ul li");
  console.log(listLi);

4 事件

4.1 概念

事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

4.2 事件三要素

事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)

4.3 基本使用

<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>

鼠标单击事件：onclick

浏览器加载完成事件：onload

4.4 事件触发的多种写法

HTML内部书写所有
HTML行内触发方法
HTML外部书写

5 非表单元素的属性操作

5.1 添加src属性值显示图片

imgBox.src = "images/jie.jpg";

5.2 改变图片大小

imgBox.width = 750;
imgBox.height = 500;

5.3 通过style改变宽高

imgBox.style.width = 750 + "px";
imgBox.style.height = 500 + "px";
//通过样式属性设置宽高、位置的属性类型是字符串，需要加上px
//凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后 //面的单词的首字母大写即可

5.4 通过类名改变宽度

imgBox.className = "imgCl";
//className 会覆盖之前设置好的类名！

5.5 隐藏元素

src="";
display=none; //不占位置的
visibility=hidden;

5.6 this的指向问题

①普通函数中，this指向window
②构造函数中，this指向实例化对象
③对象函数中，this指向当前的对象
④事件函数中，this指向事件源

6 表单元素属性操作

名称	功能
value	用于大部分表单元素的内容获取(option除外)
type	可以获取input标签的类型(输入框或复选框等)
disabled	禁用属性checked 复选框选中属性
selected	下拉菜单选中属性
checked	选择框选中属性

7 InnerText

//返回被选元素的文本内容
 var p1 = document.getElementById("p1");
  console.log(p1.innerText);
//设置被选元素的文本内容
btn1.onclick = function () {
    // 设置文本
    p1.innerText = "文本改变了哈";
    console.log(p1.innerText);
  }

8 阻止a链接跳转

<!-- 第一种方法 -->
  <a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>
  <a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>
 function fn1() {
    alert("单击链接了哈");
  }
//第一种缺点：代码不分离，不符合低耦合，高内聚的规范
<!-- 第二种方法 -->
  <a href="https://www.baidu.com" onclick="return fn2();">百度三下</a>
 function fn2() {
    alert("单击百度三了哈！");
    return false;
  }
//第二种代码 缺点同上
  <!-- 第三种方法 -->
  <a href="https://www.baidu.com" id="link">百度四下</a>
  document.getElementById("link").onclick = function () {
    alert("单击百度四了哈！");
    return false;
  }
//第三种  行为与结构分离

9 新事件

9.1 鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发
onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

//鼠标移入事件
  box1.onmouseover = function () {
    this.style.fontSize = "26px";
    this.style.height = "60px";
    console.log(111)
  }
  // 鼠标移出事件
  box1.onmouseout = function () {
    this.innerText = "鼠标移出了哈！";
    this.style.height = "30px";
    this.style.fontSize = "16px";
  }

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发
onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

// 鼠标进入事件
  box2.onmouseenter = function () {
    this.style.borderRadius = "12px";
    this.style.backgroundColor = "blue";
  }
  //鼠标的离开事件
  box2.onmouseleave = function () {
    this.style.borderRadius = "0";
    this.style.backgroundColor = "purple";
  }

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
onblur失去焦点事件：在鼠标光标失去焦点时触发

 //获取焦点事件
  user.onfocus = function () {
    this.style.border = "3px solid red";
    this.style.outline = "0";
  }
  // 失去焦点事件
  user.onblur = function () {
    console.log(this.value);
  }

onclick单击事件：在鼠标指针单击时触发
ondblclick双击事件：在鼠标光标双击时触发

box1.ondblclick = function () {
    this.style.backgroundColor = "yellow";
  }

9.2 键盘事件

onkeydown：键盘按下
onkeyup:键盘抬起

 document.getElementById("user").onkeydown = function () {
    console.log("按下了！！1");
  }
  document.getElementById("user").onkeyup = function () {
    console.log("抬起来了！！1");
    console.log(this.value);
  }

9.3 浏览器事件

onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发

  window.onscroll = function () {
    console.log("滚动了！");
  }

10 文本内容属性

10.1 innerText和textContent

设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持

10.2 innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML

11 元素属性操作

11.1 自定义属性

//元素除了本身的属性之外可以设置自定义属性
<div id="box1" class="box_1" name1="divObj">我是盒子</div>

11.2 获取属性

//getAttribute("属性的名字")
//getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取  //元素自定义的属性的属性值
 console.log(in1.getAttribute("type"));//text
  console.log(in1.getAttribute("name"));//user
  console.log(in1.getAttribute("id"));//text1
  console.log(in1.getAttribute("style"));//color: red;

11.3 设置属性

//setAttribute("属性的名字","属性的值");
//元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属 //性
 setObj1.onclick = function () {
    in1.setAttribute("name", "password");
    // in1.setAttribute("class", "");
    in1.className = "";
    // in1.setAttribute("style", "border:5px dotted pink");
    in1.style.border = "5px dotted pink";
    console.log(in1.getAttribute("name"));//password
  }

11.4 移除属性

 //removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元 //素自定义的属性
  var removeObj = document.getElementById("remove");
  removeObj.onclick = function () {
    in1.removeAttribute("class");
    div1.removeAttribute("name1");
  }

12 元素样式设置的几种方式

<body>
  <div class="box1" id="box1"></div>
  <input type="button" value="改变样式" id="change">
</body>
<script>
  var box = document.getElementById("box1");
  var changeBtn = document.getElementById("change");
  changeBtn.onclick = function () {
    // 1、对象.style
    // box.style.backgroundColor = "red";
    // 2、对象.className
    // box.className = "box2";
    // 3、对象.setAttribute("style")
    // box.setAttribute("style", "background-color:red");
    // 4、对象.setAttribute("class")
    // box.setAttribute("class", "box2");
    // 5、对象.style.setProperty("CSS属性","CSS属性值")
    // box.style.setProperty("background-color", "red");
    // 6、对象.style.cssText
    box.style.cssText = "background-color: red;height:80px";
  }
</script>

13 节点操作

13.1 节点概念

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

13.2 节点类型

//document的节点类型---9
 console.log(document.nodeType);//9
//标签的节点类型---1
var box1 = document.getElementById("box1");
console.log(box1.nodeType);//1
//属性的节点类型---2，getAttributeNode("属性"):获取元素的属性节点
 var attr1 = box1.getAttributeNode("class");
  console.log(attr1.nodeType);//2
//文本的节点类型---3，元素的第一个子节点就是文本节点
  console.log(box1.firstChild.nodeType);//3

13.3 节点名称

//通过nodeName可以获取元素的节点名称。
//document的节点名称---#document
  console.log(document.nodeName);//#document
//标签的节点名称---大写的标签名
 console.log(box1.nodeName);//DIV
//属性的节点名称---属性名
  console.log(attr1.nodeName);//class
//文本的节点名称---#text
  console.log(box1.firstChild.nodeName);//#text

13.4 节点值

//通过nodeValue可以获取元素的节点的值。
//document的节点值---null
 console.log(document.nodeValue);//null
//标签的节点值---null
  console.log(box1.nodeValue);//null
//属性的节点值---属性值
  console.log(attr1.nodeValue);//boxCl
//文本的节点值---文本的内容
  console.log(box1.firstChild.nodeValue);//我是div元素

13.5 节点之间的关系

节点树

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点

节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别

父节点–parentNode
父元素节点–parentElement
子节点–childNodes：标签节点、文本节点、注释节点 得到的是伪数组
子元素节点–children :标签节点
第一个子节点–firstChild:文本
第一个子元素节点–firstElementChild：第一个标签
最后一个子节点–lastChild:文本
最后一个子元素节点–lastElementChild: 最后一个标签
上一个子节点–previousSibling:文本
上一个子元素节点–previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点–nextElementSibling: 下一个标签

总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。

13.6 插入节点

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。

node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。

var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);

14 创建元素的三种方式

14.1 document.write()

//弊端：只能往body中添加元素
document.write('<div class="box1">我是div</div>');

14.2 innerHTML

//弊端：在同级下只能添加一种元素，多个会覆盖
  document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

14.3 document.createElement()

//父元素.appendChild(子元素)：给父元素末尾添加子元素
var pObj = document.createElement("p");
  divObj1.appendChild(pObj);

15 事件进阶

15.1 监听事件

//绑定监听事件 addEventListener("事件的类型",事件的处理程序)
box1.addEventListener("click", myFunc)
  function myFunc() {
    this.style.backgroundColor = "blue";
  }
 //解绑监听事件removeEventListener("事件的类型",事件的处理程序)
 box1.removeEventListener("click", myFunc);

15.2 事件对象

//任何事件都有内置对象event，事件对象的兼容性写法为
var event = event || window.event;
// 事件的类型
    console.log(event.type);
    // 元素的ID
    console.log(event.target.id);
    // 文本的内容
    console.log(event.target.innerText);
    // 事件的触发点是距离浏览器左侧的横纵坐标
    console.log("横坐标：" + event.clientX + "," + "纵坐标：" + event.clientY);
    console.log("横坐标：" + event.pageX + "," + "纵坐标：" + event.pageY);
    console.log("我单击header!");

15.3 事件冒泡

事件冒泡：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。

<div>
　　<p>元素</p>
</div>

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？
如何阻止冒泡（存在兼容性）
e.stopPropagation(); 谷歌和火狐支持,
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

16 BOM

16.1 概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

16.2 BOM的顶级对象

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

注意： window下一个特殊的属性 window.name

16.3 对话框

弹出一个弹窗

alert()

弹出一个带有提示信息的可输入的弹窗

prompt()

弹出一个需要点击的弹窗

confirm()

16.4 加载事件

onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

16.5 Location对象

常用属性

// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);

16.6 History对象

//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();
};

16.7 Navigator对象

//通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);

17 定时器

17.1 setInteval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

//定时器
//参数1:函数
//参数2:时间—毫秒—1000毫秒–1秒
//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数…
//返回值就是定时器的id值

17.2 setTimeout()

另一个定时器定义和用法
方法用于在指定的毫秒数后调用函数或计算表达式。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想重复执行可以使用 setInterval() 方法。
提示： 使用 clearTimeout() 方法来阻止函数的执行。
参数：param1回调函数，param2时间
返回值: 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行