day36 DOM节点操作

什么是节点

整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

节点类型

通过noteType属性可以获取节点的类型
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

节点名称

通过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

节点值

通过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元素

节点之间的关系

节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。
父节点–parentNode
父元素节点–parentElement
子节点–childNodes：标签节点、文本节点、注释节点 得到的是伪数组
子元素节点–children :标签节点
第一个子节点–firstChild:文本
第一个子元素节点–firstElementChild：第一个标签
最后一个子节点–lastChild:文本
最后一个子元素节点–lastElementChild: 最后一个标签
上一个子节点–previousSibling:文本
上一个子元素节点–previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点–nextElementSibling: 下一个标签
总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。

插入节点

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]);

创建元素的三种方式

(1)document.write()
弊端：只能往body中添加元素

document.write('<div class="box1">我是div</div>');

(2)、innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖

  document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

(3)、document.createElement()
父元素.appendChild(子元素)：给父元素末尾添加子元素

var pObj = document.createElement("p");
  divObj1.appendChild(pObj)

监听事件

绑定监听事件 addEventListener(“事件的类型”,事件的处理程序)

box1.addEventListener("click", myFunc)
  function myFunc() {
    this.style.backgroundColor = "blue";
  }

解绑监听事件removeEventListener(“事件的类型”,事件的处理程序)

 box1.removeEventListener("click", myFunc);

事件对象

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!");

事件冒泡

如何阻止冒泡（存在兼容性）
e.stopPropagation(); 谷歌和火狐支持,
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

BOM

BOM的概念

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

BOM的顶级对象

window下一个特殊的属性 window.name

对话框

alert()
prompt()
confirm()

加载事件

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

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);

History对象

//跳转的

my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};

//后退

my$("btn").onclick = function () {
window.history.back();
};

Navigator对象

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

定时器

setInteval()

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

setTimeout()

另一个定时器定义和用法
方法用于在指定的毫秒数后调用函数或计算表达式。