今天完成的事情：
1、今天在师兄的提醒下，重新写了下js2的参数设置，不过还没有完成。
2、学习了js里关于DOM 的方面。
明天计划的事情：
1、明天搞定js2的页面及js代码。
遇到的问题：
<form class="input-container">
<label>
请输入玩家数量<input type="text" class="input" value="" id="input"><span class="text">玩家数量为4-18</span>
</label>
</form>
var input1 =document.getElementById("input");
input1.value =6;
这次为什么却不显示？？ 在console里显示input1值为4,可是页面上却没有变化。
收获：
关于JS里的DOM
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM脱胎于Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。1998 年10 月DOM１级规范成为W3C 的推荐标准，为基本的文档结构及查询提供了接口。本章主要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用，以及JavaScript 对DOM1级的实现。IE、Firefox、Safari、Chrome 和Opera 都非常完善地实现了DOM
(摘自javascript高级程序设计)
DOM将html或xml文档描绘成一个多层节点构成的结构。每个节点都拥有各自的特点、数据、方法，另外也与其他节点存在着关系。节点之间构成了层次，而所有页面标记则表现为特定节点为根节点的树状结构。
对于节点来说，一共有12种类型，其中最常用的就是元素节点、特性节点、文本节点了。
DOM常见的操作有：
对父节点的操作：
1、添加节点
appendChild()方法，用于想childNodes列表的末尾添加一个子节点。
insertBefore()方法，接受两个参数，要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（previousSibling）.
2、替换节点：
replaceChild()方法，接受两个参数，要插入的节点和要替换的节点。
3、移除节点：
removeChild()方法，接受一个参数，即被移除的节点。
4、复制节点：
cloneNode()，接受一个布尔值参数，true或false，接受true，执行深复制，复制本节点和它的整个子节点树；接受false，执行浅复制，只复制节点本身。使用cloneNode()后，返回的节点副本，在文档内存里，可是并没有添加在节点树中，这点一定需要牢记。
处理文本节点，使用normalize()方法。调用该方法，它的子节点中如果有空白节点，就删除。如果有相邻的文本节点，就合并成为一个文本节点。
查找节点
document.getElementById('id属性值');返回拥有指定id的第一个对象的引用 document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合
新建节点
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
给元素添加内容
element.innerHTML='新增文本内容'
DOM事件
允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
DOM除了添加动态样式和动态脚本外，还有一个很重要的方面就是操作表格，如果使用常规的表格操作方法，那么很麻烦繁琐，用HTML DOM为表格提供一些属性和方法，使用起来很方便。
比如table元素的rows属性，存放着所有行的HTMLCollection.
createThead()创建一个thead元素放入表格中。
ps:创建表格的时候 table 、tbody、th 都没有特定创建方法，只能通过document.createElement()来创建
关于洗牌算法
洗牌算法顾名思义，就是像我们生活中玩扑克牌，我们需要洗牌，而洗牌算法是用来把一个数组打乱，数组中的每个数出现在同一个位置的概率是相同的，而且时间要尽可能少，这样的洗牌算法才算是合格的。
下面两种洗牌算法本质上是一样的。洗牌算法的思想是遍历数组元素，将其与之前的任意元素交换。因为遍历有从前向后和从后往前两种方式，所以该算法大致也有两个版本的实现。
从前向后的方式已经在上一篇日报描述过，就再看看从后向前把
function shuffle(array) {
var _array = array.concat();
for (var i = _array.length; i--; ) {
var j = Math.floor(Math.random() * (i + 1));
var temp = _array[i];
_array[i] = _array[j];
_array[j] = temp;
}
return _array;
}
这个for循环里面只有两个参数，i为数组长度，i--立即执行，也就是说i在循环里的范围是[0,length-1]，恰恰对应了数组每一项，这里面没有判断，大家想想当i循环到0的，这是最后一次循环，为什么说是最后一次循环呢？因为，在进行一次循环的时候，i=-1，但是数组的可没有array[-1]这一项，所以当i<0的时候，这个循环就会自动退出，相当于一个隐藏的判断。
如果你想在for循环一开始就进行判断的话，必须设置i=length-1，否则你洗牌后数组项数多一个，会出错。如下面的函数一样
function shuffle(a) {
var arr=a.concat();
var length=arr.length;
for(var i=length-1,rand;i>=0; i--) {
rand=Math.floor(Math.random()*(i+1));
var temp =arr[rand];
arr[rand]=arr[i];
arr[i]=temp;
}
return arr;
}
页面间的传递数值（现在我只能掌握这种方法，明天再看看别的方法）
当使用window.open()打开新页面时，浏览器会认为这两个窗口之间有一种打开与被打开的关系，所以在被打开的新窗口中在当前窗口的window对象中有一个window.opener 属性，这个值里面放着打开窗口的引用，所以可以获得这个值，进而引用上一页面内的对象的值。
虽然弹出窗口有一个指针指向打开它的原始窗口，，但是原始窗口并没有这样的指针指向弹出窗口。
<body>
<button id="btn">0</button>
<script>
var arr=[1,2,3,4,5,6,7,8];
var name ="a";
var btn =document.getElementById("btn");
btn.onclick=a;
function a() {
var bbb=window.open("test.html");
}
</script>
</body>
这是第一个页面很简单的一个测试页面，只是为了测试下这种方法是否能在页面间传递数据。
通过点击按钮，跳转到test.html上，下面是test.html里的代码，也灰常简单。
var page=window.opener;
if(page !== null){
var arr =page.arr;
console.log(arr);
};
var arr=1;
console.log(arr);
结果是
(8) [1, 2, 3, 4, 5, 6, 7, 8]
1
第一行黄底白字的是第一个页面里的数组，而第二行红底白字是第二个页面定义的arr,里面就一个数字1.
我的理解是window.opener指向第一个页面，其实代表的就是第一个页面里面的window，这个window与第二个页面的window是两回事。就像例子中虽然有两个arr，它们都有各自的含义。
返回列表
评论