JavaScript基础笔记四

一、全面操作DOM

1.DOM操作图解

2.JavaScript组成

2.1核心(ECMAScript):描述了JS的语法和基本对象的定义规范

2.2文档对象模型(DOM):处理网页内容的方法和接口。比如:页面结构的增删改查...

2.3浏览器对象模型(BOM):与浏览器交互的方法和接口。比如:前进/后退、界面跳转、弹窗...

3.DOM(document object model)文档对象模型

DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构;目的其实就是为了能让js操作html元素而制定的一个规范;DOM树的根统一为文档的根--document。

3.1document内置方法:

3.2节点:由结构图中我们可以看到,整个文档就是一个文档节点;其中每一个HTML标签都是一个元素节点;标签中的文字称为文字节点,标签的属性称为属性节点,一切皆是节点。

3.3节点的获取

3.4节点的访问:DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。

父级 parentNode:当前元素的上一级,必须是亲爸爸,爷爷都不算。

兄弟节点

nextSibling 下一个兄弟的意思,在ie678里面是正常的;但是在谷歌、火狐等浏览器里面,默认的下一个兄弟是空格或者换行。

兼容性写法:var next = div.nextElementSibling || div.nextSibling;

注意:一定先写nextElementSibling,因为谷歌、火狐等是认识nextSibling,但是空格或换行是掉不出来元素的属性的,所以会报错。解决方案:优先执行nextElementSibling。

获取第一个节点和最后一个节点

获取所有孩子节点

注意:只能获取儿子辈的,不能获取孙子辈的

1.childNodes(W3C推荐使用)

nodetype检测元素节点类型

2.children(IE出品)

3.5DOM节点操作(重点)

需求:在页面的很多特效中,元素节点是动态生成的。最常见的比如:轮播图下面的小圆点,是根据图片的张数动态生成的。这时候,我们需要用js动态操作DOM节点:创建、添加、删除、克隆...

创建节点:document.createElement(“标签名”)

添加节点:添加节点就是把创建好的节点放到某个地方

1.appendChild():a.appendChild(b);把b标签放到a标签的里面,并且是放到a标签的最后面

2.insertBefore(插入的节点,参照节点);如果第二个参数为null则默认插入到后面,该参数不能省略。

删除节点

1.removeChild():a.removeChild(b);删除a里面的孩子b节点

2.remove():a.remove();把a节点直接删除

克隆节点(cloneNode):用于复制节点,接受一个布尔值参数;true表示深复制(复制节点及其所有子节点),false表示浅复制(复制节点本身,不复制子节点)。

3.6标签的属性

getAttribute(“属性”)

setAttribute(“属性”,“值”)

removeAttribute(“属性名”)

注意:以上写法在IE6,7中不被支持,要做兼容;demo.className = "one";

3.7cssText:可以更改多个属性设置

二、九宫格案例

1.九宫格算法分析

1.1利用控件的索引index计算出控件所在的行号和列号

1.2利用列号计算控件的x值

1.3利用列号计算控件的y值

三、内置对象Date

1.目前js中常用的内置对象

2.日期对象Date的基本使用

2.1声明日期函数:var date = new Date();

2.2date对象常用方法

获取日期和时间

四、定时器

1、什么是定时器

在网页中有很多效果都是自己运动的;setInterval每隔一段时间会自动触发重复执行某一个操作;基本语法结构:window.setInterval("执行的代码串",间隔时间);

2.常见的使用形式

定时器的一个重要用途在于:它可以不断刷新某个区域!意味着:这个区域不在初始化中执行,而是通过定时器进行唤醒,并且是有时间可控的。

3.自定义时间:var endTime = new Date(“2017/03/18 17:30:00”)

日期换算:

你可能感兴趣的:(JavaScript基础笔记四)