JavaScript 第四课笔记

十四、DOM查找

DOM：document object model
DOC是W3C（万维网联盟）的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式，对网页进行增删改查的操作。

常用的DOM操作

1. DOM查找：按id属性，精确查找一个元素对象

var elem document.getElementById("id")
//getElementById只能用在document上，只用于准确查找一个元素
//效率非常高

2. DOM查找：按标签名查找

var elem = parent.getElementsByTagName("tag");
//查找指定parent节点下的所有标签为tag的子代节点
//可用在任意父元素上，如div/ui
//不仅查直接子节点，而且查所有子代节点
//返回一个动态集合

3. DOM查找：通过name属性查找

document.getElementsByName('name属性值')
//可以返回DOM树中具有指定name属性值的所有子集合

4. DOM查找：通过class属性查找

var elems = parent.getElemnetsByClassName("class");
//有兼容性问题：IE9+

5. DOM查找：通过CSS选择器查找

只找一个元素
selector支持一切css选择器（CSS选择器：元素、类、Id、后代、子代、群组）
如果选择器匹配的有多个，只返回第一个

var elem = parent.querySelector("selector")

找多个
selector API返回的是非动态集合

var elem = parent.querySelectorAll("selector")

十五、DOM修改

DOM标准

1. 核心DOM：可操作一切结构化文档的API，包括HTML和XML，万能但是繁琐。
2. HTML DOM：专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行了简化，不是万能但是简单。

开发中，建议先用简单的，再用复杂的补充，以实现效果为目的。

修改属性：核心DOM的4个操作

1. 读取属性值

//1、先获取属性节点对象，再获得节点对象的值
var attrNode = elem.attributes[下标/属性名];
var attrNode = elem.getAttributeNode[属性名];
attrNode.value;//属性值

//2、直接获取属性值
var value = elem.getAttribute("属性名");

2. 修改属性值

elem.setAttribute("属性名",value)

3. 判断是否包含指定属性

var bool = elem.hasAttribute("属性名")
//返回值是true/false

4. 移除属性

elem.removeAttribute("属性名")

修改样式
内联样式：elem.style.属性名
需要强调的是，属性名要去横线，变驼峰。例如：

background-color => backgroundColor
list-style-type => listStyleType

十六、DOM添加

添加元素的步骤

1. 创建空元素
2. 设置关键属性
3. 将元素添加到DOM树

1. 创建空元素

var elem = document.createElement("元素名")

2. 设置关键属性

a.innerHTML = "go to tmooc"
a.herf = "http://tmooc.cn"
<a href = "http://tmooc.cn">go to tmooc</a>

3. 设置关键样式

a.style.opacity = "1";
a.style.cssText = "width: 100px;height:100px";

4. 将元素添加到DOM树
方法一：
将一个父元素追加最后一个子节点

parentNode.appendChild(childNode)

方法二：
用于在父元素中的指定子节点之前添加一个新的子节点

parentNode.insertBefore(newChild,existingChild)

添加元素优化
尽量少的操作DOM树，因为每次修改ＤＯＭ树，都导致重新layout
如果同时创建父元素和子元素，建议在内存中先将子元素添加到父元素，在将父元素一次性挂到页面；
如果只添加多个平级子元素时，就要将所有子元素临时添加到文档片段中，再将文档片段整体添加页面；
文档片段内存中，临时保存多个平级子元素的虚拟父元素，用法和普通父元素完全一样；

创建片段

var frag = document.createDocumentFragment();

将子元素临时追加到frag中

frag.appendChild(child);

将frag追加到页面

parent.appendChild(frag);
//append之后，frag自动释放，不会占用元素，这也是为什么说它是一个虚拟的文档片段的原因

十七、BOM

BOM：Browser Object Model，专门操作浏览器窗口的API，没有标准，有兼容性问题

浏览器对象模型

1. window：代表整个窗口
2. history：封装当前窗口打开后，成功访问过的历史url记录
3. navigator：封装浏览器配置信息
4. document：封装当前正在加载的页面内容
5. location：封装了当前窗口正在打开的url地址
6. screen：封装了屏幕的信息
7. event：定义了网页中的事件机制

获取当前窗口大小

1. 完整窗口大小：window.outerWidth/outerHeight
2. 文档显示区大小：window.innerWidth/innerHeight

定时器
应用：网页动态效果，计时器

1. 周期性定时器：反复执行

setInterval(exp,time):
//exp周期性触发代码
//exp:执行时间
//time:时间周期，单位为毫秒

setInterval(function(){console.log("Hello World");},1000);

2. 一次性定时器：只执行一次

setTimeout(exp,time);
//一次性触发代码exp
//exp:执行时间
//time:间隔时间，单位为毫秒

setTimeout(function(){alert("已结束")},3000);

停止定时器

1. 给定时器取名

var timer = setInterval(function(){console.log("Hello World");},1000);

3. 停止定时器

clearInterval(timer);

上一节：JavaScript第三课笔记
下一节：JavaScript第五课笔记