JS高级程序读书笔记（4）

函数

函数声明：函数声明提升

函数表达式：使用前先赋值

sayHi()
var sayHi = function(){
 alert("hello")
}   //报错

闭包

参照之前执行环境的文章博客。进行深入了解。

setTimeout()

JavaScript 是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个参数告诉JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

BOM之location对象

location对象即是window对象，也是document的对象，window.location === document.location 。

location的属性
1. host           'www.google.com:443'
2. hostname       'www.google.com'
3. port           '443'
4. href           'https://www.google.com'
5. protocol       'http:'
6. pathname       '/index.html'
7. search         '?a=b&c=d'
8. hash           '#contents'

location.href="xxx" 和 `location.replace(“xxx”) 都是更新页面，前者会在历史记录中保存，后者不会。

DOM对象（文档对象模型）

1
2
3

BOM和DOM
BOM：浏览器对象模型，是独立于内容与浏览器窗口进行交互的对象；主要用于操作浏览器的属性和行为。比如新建窗口，获取屏幕分辨率等。
DOM：文档对象模型，是 HTML 和XML 的应用程序接口（API）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分

Node类型：DOM1级中定义了Node接口，所有的DOM节点都继承自Node类型，因此所有的节点都具有Node类型的所有属性和方法。Node类型由nodeType属性表明，一共有12个属性，常用的node类型有以下几个
- nodeType值为1：表示元素节点，即各种标签
  
  nodeName：元素名 / nodeValue：null
- nodeType值为3：表示文本节点，即标签内部的文字
  
  nodeName：#text / nodeValue：节点的内容
- nodeType值为9：表示文档节点，即document节点
  
  nodeName：#document / nodeValue：null
- nodeType值为8：表示注释节点
Node节点关系：（这里包含了文本节点，包括空格；区别于element的节点）
- childNodes, firstChild, lastChild
- parentNode
- previousSibling, nextSubling
- Array.prototype.slice.call(nodeList,0) ：把nodeLIst对象转换为数组
Node操作节点的方法：
- node.appendChild(node)：向childNodes末尾添加节点
  
  node.insertBefore(newnode, existingnode)：insertBefore(newNode,null) ，在末尾添加，等同于appendChild()
- removeChild() ：移除父节点下的子节点
  
  replaceChild(newNode，oldNode) ：替换父节点下的子节点
- 以上方法都是基于父节点操作的
- node.cloneNode(boolean) ：true为深复制，包括子节点 / false为浅复制

Document类型

js中通过document类型表示文档。浏览器中的document对象是HTMLDocument的一个实例，表示整个HTML页面。

document的属性：

document.documentElement：始终指向页面的html元素

document.body ：指向body元素

document.title ：获取文档标题的内容，也可以修改document.title="haha"

关于网页请求有关的属性

document.URL ：页面完整的URL

document.domian ：域名

document.regerrer ：连接到当前页面的那个url

document.readyState ：loading（正在加载文档）、 complete（已经加载完文档）
document查找元素的方法：

document.getElementById() ：标签的id名

document.getElementsByTagName() ：标签名

Element类型

element类型表示HTML或者XML中的元素。提供对元素标签名，子节点的访问。

获取特性：

element.getAttribute("name") ：

element.setAttribute("name","value")

element.removeAttribute("name")

简写及设置：document.div="xxx" / document.className="xxx"
1
2
3
4
5
classList :操作类名的方法
div.classList.add(value)
div.classList.contains(value)
div.classList.remove(value)
div.classList.toggle(value)
创建标签：

document.creatElement("")
节点关系：推荐！！只返回元素节点，不包含文本节点

element.children

element.firstElementChild

element.lastElementChild

element.previousElementSibling

element.nextElementSibling

Text类型

text类型表示文本节点

创建文本节点：

document.createTextNode("text内容")

扩充

document/element.querySelector('.class') &&document/element.querySelectorAll()
document/element.getElementByClassName()

table标签

<table border="1">
	<thead>
		<tr>    //tr表示行
			<th>xxx</th>  //表头，即标题
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>xxx</td>
		</tr>	
	</tbody>
	<tfoot> xxx </tfoot>
</table>

自定义数据属性

添加前缀data- 就可以自定义属性。可以通过元素的dataset属性来访问属性值

element.dataset.name=value 即设置了data-name=”value”

innerHTML：标签，空格，换行都直出，遇到 < 等进行转义

innerText ：去掉标签，所有子文本节点的文本直出，空格和换行会忽略成一个空格

textContent ：去掉标签，所有都直出