day42

1.节点操作

1.1概述

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

整个文档是一个文档节点  document

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

1.2节点类型

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

1.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

1.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元素

2节点之间的关系

2.1HTML DOM节点数

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:

day42

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

2.2节点之间的关系

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

父节点--parentNode

父元素节点--parentElement

子节点--childNodes:标签节点、文本节点、注释节点   得到的是伪数组

子元素节点--children :标签节点

第一个子节点--firstChild:文本

第一个子元素节点--firstElementChild:第一个标签

 最后一个子节点--lastChild:文本

最后一个子元素节点--lastElementChild: 最后一个标签

上一个子节点--previousSibling:文本

上一个子元素节点--previousElementSibling: 上一个标签

下一个子节点 --nextSibling:文本

下一个子元素节点--nextElementSibling: 下一个标签

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

2.3插入节点

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

3创建元素的三种方式

document.write()

弊端:只能往body中添加元素

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

innerHTML

弊端:在同级下只能添加一种元素,多个会覆盖

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

document.createElement()

父元素.appendChild(子元素):给父元素末尾添加子元素

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

  divObj1.appendChild(pObj);

4事件进阶

4.1事件三要素

事件源:是指那个元素引发的事件。比如当你点击cdsn图标的时候,会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者,可以这样理解, 当你对某个元素执行动作的时候,会触发一系列效果(动画,跳转....),那么这个元素就是事件源。

事件类型:例如,点击,鼠标划过,按下键盘,获得焦点。

事件驱动程序:事件驱动程序即执行的结果,例如,当你点击cdsn图标的时候,会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。

执行事件的步骤:获取元素、绑定事件、书写事件驱动程序

4.2监听事件

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

box1.addEventListener("click", myFunc)

  function myFunc() {

    this.style.backgroundColor = "blue";

  }

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

 box1.removeEventListener("click", myFunc);

4.3事件对象

任何事件都有内置对象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!");

4.4事件冒泡

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

阻止冒泡(存在兼容性)

e.stopPropagation(); 谷歌和火狐支持,

window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

5BOM

5.1概述

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

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

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

5.2BOM的*对象

window是浏览器的*对象,当调用window下的属性和方法时,可以省略window注意:window下一个特殊的属性 window.name

5.3对话框

alert()

prompt()

confirm()

5.4加载事件

onload事件

onload 事件会在页面或图像加载完成后立即发生。

onload 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码

5.5Location对象

常用属性

// //地址栏上#及后面的内容

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

5.6History对象

//跳转的

my$("btn1").onclick = function () {

window.location.href = "15test.html";

};

//前进

my$("btn2").onclick = function () {

window.history.forward();

};

//后退

my$("btn").onclick = function () {

window.history.back();

};

5.7Navigator对象

通过userAgent可以判断用户浏览器的类型

console.log(window.navigator.userAgent);

//通过platform可以判断浏览器所在的系统平台类型.

//console.log(window.navigator.platform);

6定时器

6.1setInteval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInteval()

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

//定时器

//参数1:函数

//参数2:时间---毫秒---1000毫秒--1秒

//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....

//返回值就是定时器的id值

6.2setTimeout()

另一个定时器定义和用法

方法用于在指定的毫秒数后调用函数或计算表达式。

提示: 1000 毫秒= 1 秒。

提示: 如果你只想重复执行可以使用 setInterval() 方法。

提示: 使用 clearTimeout() 方法来阻止函数的执行。

参数:param1回调函数,param2时间

返回值:  返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行

上一篇:设计模式之单一原则:如何跳出错误抽象的误区?


下一篇:day42--new操作符具体干了什么?