一、今天完成的事情

1、完善任务1

2、了解杀人游戏的玩法。

3、学习js的DOM操作。

4、完成设置参数页面的结构布局。

二、明天计划的事情

1、继续任务2。

2、学习js数组、数组乱序、键盘事件、正则表达式。

3、学习jQuery。

三、遇到的问题

1、常见的DOM操作有哪些？

首先通过以下图可以的理解DOM文档对象模型：

DOM树有两种，分别为节点树和元素树。

•节点树：把文档中所有的内容都看成树上的节点；

•元素树：仅把文档中的所有标签看成树上的节点。

DOM的常用操作？

1.1 查找节点

document.getElementById('id属性值'):返回拥有指定id的第一个对象的引用

document/element.getElementsByClassName('class属性值'):返回拥有指定class的对象集合

document/element.getElementsByTagName('标签名'):返回拥有指定标签名的对象集合

document.getElementsByName('name属性值'):返回拥有指定名称的对象结合

document/element.querySelector('CSS选择器'):仅返回第一个匹配的元素

document/element.querySelectorAll('CSS选择器'):返回所有匹配的元素

document.documentElement:获取页面中的HTML标签

document.body:获取页面中的BODY标签

document.all['']:获取页面中的所有元素节点的对象集合型

1.2 新建节点

document.createElement('元素名'):创建新的元素节点

document.createAttribute('属性名'):创建新的属性节点

document.createTextNode('文本内容'):创建新的文本节点

document.createComment('注释节点'):创建新的注释节点

document.createDocumentFragment( ):创建文档片段节点

1.3 添加新节点

parent.appendChild( element/txt/comment/fragment ):向父节点的最后一个子节点后追加新节点

parent.insertBefore( newChild, existingChild ):向父节点的某个特定子节点之前插入新节点

element.setAttributeNode( attributeName ):给元素增加属性节点

element.setAttribute( attributeName, attributeValue ):给元素增加指定属性，并设定属性值

1.4 删除节点

parentNode.removeChild( existingChild ):删除已有的子节点，返回值为删除节点

element.removeAttribute('属性名'):删除具有指定属性名称的属性，无返回值

element.removeAttributeNode( attrNode ):删除指定属性，返回值为删除的属性 

1.5 修改节点

parentNode.replaceChild( newChild, existingChild ):用新节点替换父节点中已有的子节点

element.setAttributeNode( attributeName ):若原元素已有该节点，此操作能达到修改该属性值的目的

element.setAttribute( attributeName, attributeValue ):若原元素已有该节点，此操作能达到修改该属性值的目的

四、收获

    1、学习了常见的DOM操作。

2、规范自己代码。