发表于： 2018-05-16 23:02:54
1 591
今天完成的事情：学习了Dom节点，Array数组，完成了js任务一的50%；
明天的计划：完成js1
今天的收获：
看了任务1的效果图后，先构思了一下大概的流程，以及实现过程中需要学习到什么知识点；
看到九个格子的时候在想怎么通过js操作他们并且改变他们的样式，然后搜了一下资料可以通过DOM节点来进行操作；
DOM
概念：DOM描绘了一个层次化的节点树，这个节点数云讯开发人员添加、移除和修改页面的某一部分，也就是js可以通过DOM来修改文档结构甚至修改样式！
1 节点层次
DOM可以将任何HTML和XML文档描绘成一个多层节点构成的结构。节点分为不同的类型分别表示文档中不同的信息或标记！每个节点都有格子的特点、数据和方法，也和其他的节点存在某种关系，可以把节点看成一个家族。 p.247
1.1 node类型
- DOM1级 定义了node接口，操作这个接口可以访问文档中相对应的元素；js中所有的节点类型都继承自node，因此所有节点类型都共享相同的属性和方法。
- 每个节点都有个nodetype（节点属性），节点类型有12种，任何节点类型都必须是其之一；比较常用的是文本和元素节点 p.248
- 1、nodeName和nodeValue属性，了解节点的具体信息的时候用
- 2、节点关系，每个节点都有一个childNodes属性，其中保存一个nodeList属性，nodeList就是一个类似数组的对象，用来保存一组有序的对象，可以通过数组角标来访问这些节点。虽然类似数组，但是它不是Array的实。
- 3、每个节点都有个parentNode属性，这个属性执行文档树的父节点；包含在childNodes列表中的所有节点都有相同的父节点，所以他们的关系是同胞节点；
1.2操作节点
- appendChild（）用于向childNodes列表末尾添加一个节点。添加后所有相应的关系都会更新；如果添加的节点存在原文档，那只会把节点的位置移到新位置；
- insertBefore（）节点插入在特定位置，括号内可以传入两个值：要插入的节点和作为参照的节点，插入的节点会在参照的节点之前；
- replaceChild（）替换节点，传入两个值：要插入的节点和要替换的节点；
- removeChild（）仅移除节点，接受的参数是要移除的节点；
- 使用四个方法的前提条件：必须取得父节点，加入使用appendChild ： someNode.appendChild(someNode.first) someNode表示拥有多个子节点的父节点！
- cloneNode（）括号内可以接受一个布尔值参数，true、false，true的情况下复制节点和节点数，false的情况下只复制节点本身，这时候节点就成了光杆司令了！clone不会复制属性！！！
1.3Document类型
- Document类型（节点）表示文档，document对象是HTMLDocument的一个实例，表示整个HTML页面，还可以操作页面的外观和底层结构！document是全局对象；对象是抽象的，实例是具体化的；
- 1、文档的子节点可以是DocumentType（最多一个）、element（最多一个）、processingInstruction、comment，
- 1、通过document对象 快捷方式访问子节点：documentElement指向HTML页面中的<html>元素， childNodes访问文档元素。指向body的话要先取得body的引用；
返回列表
评论