暑期培训第二天

DOM & BOM


HTML是一棵树，DOM是操纵这棵树的方法。DOM的节点包括元素节点、属性节点和文本节点。

元素节点（如：p 、div 等各种标签），属性节点（如：href、src 等），文本节点即标签所包含的文本内容。

监听器 addEventListener (event, fn, boolen),移除监听器 removeEventListener (event, fn, boolen)

【注意！移除时所有参数要一致！且事件名称不能带 “on” 】 此方法不适用IE9以下。

IE9适用方法: attachEvent (event, fn) 【注意！事件名称要带 “on” 】

兼容写法：

1
2
3
4
5
6
if(object.addEventListener){
 		object.addEventListener();
}
else{
 		object.attachEvent();
}

window.onload函数


window.onload = function(){} 为文档全部加载后再执行的函数，可以加匿名函数也可以加非匿名函数。但是不能以这种方式为事件绑定多个事件处理函数，例如：

1
2
window.onload = function a(){};
window.onload = function b(){};

但是可以用以下方式：

1
2
3
4
5
6
7
8
9
10
window.onload=function(){
 		function a(){
  			document.getElementById("bg").style.backgroundColor="#F90";
 		}
 		function b(){
   		document.getElementById("bg").style.width="200px";
 		}
     a();
     b();
}

也可以用addEventListener为事件绑定多个事件处理函数：

1
2
3
4
5
6
7
8
window.addEventListener("load",bg,false);
window.addEventListener("load",changeW,false);
function bg(){
 		document.getElementById("bg").style.backgroundColor="#F90";
}
function changeW(){
 		document.getElementById("bg").style.width="200px";
}

CSS选择器


后代选择器（如：div p 指以 div 为父元素的 p 元素）

【注意！有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em ，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。】

因此，ul em 将会选择以下标记中的所有 em 元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul>
  <li>List item 1
    <ol>
			<li>List item 1-1</li>
			<li>List item 1-2</li>
			<li>List item 1-3
        <ol>
				  <li>List item 1-3-1</li>
				  <li>List item ```bash<em>1-3-2</em></li>
				  <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

子元素选择器 (如： h1 > strong 指作为 h1 元素子元素的所有 strong 元素 )
例如：

1
h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

1
2
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

相邻兄弟选择器 ( 紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 )

例如：h1 + p 指选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素

1
2
3
4
5
6
7
8
9
10
11
12
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与

第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

1
li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

sort方法排序


参阅 http://www.webkaka.com/tutorial/js/2015/070314/

oninput实现实时监听输入框变化


在元素上绑定oninput事件
1
2
<input type="text" id="a" oninput="change()" />
<div>您输入的值是：<span id="b">尚无录入</span></div>

1
2
3
4
5
function change(){
  var input = document.getElementById("a");
  var span = document.getElementById("b");
  span.innerHTML = input.value;
}

几个原生函数


map、forEach、some、every、filter、reduce函数 ,
参阅 https://eczn.coding.me/blog/%E6%B4%BB%E7%94%A8%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95%E8%A7%A3%E5%86%B3%E6%95%B0%E7%BB%84%E9%97%AE%E9%A2%98.html