try…catch
try{
console.log('a');
console.log(b);// error
console.log('c');
}catch(e) {// error error.message error.name --> 系统会封装到error对象中,然后传到这个变量e来供我们使用
console.log(e.name + " : " + e.message);
}
console.log('d');
报错之后的行数不再执行,直接执行完catch中的代码然后跳出
错误类型
try{}catch(e)()finally{}
Error.name的六种值对应的信息:
- Evalerror: eval()的使用与定义不一致
- RangeError: 数值越界
- ReferenceError: 非法或不能识别的引用数值
- SyntaxError: 发生语法解析错误
- TypeError: 操作数类型错误
- URIError: URI处理函数使用不当
es5严格模式
“use strict”
- 不再兼容es3的一些不规则语法。使用全新的es5规范
- 两种用法
- 全局严格模式
- 局部函数內严格模式(推荐)
- 就是一行字符串,不会对不兼容严格模式的浏览器产生影响。
- 不支持 with, arguments, callee, func, caller;变量赋值前必须声明,局部this必须被赋值(Person.call(null/undefined)赋值什么就是什么)拒绝重复属性和参数
什么是DOM
- DOM-> Document Object Model
- DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象,由浏览器厂商定义,用来操作htm和xml功能的类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。
DOM基本操作
1.对节点的增删改查
-
查
- 查看元素节点
- document代表整个文档
- document. getElementByld()// 元素id在ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素
- getElementsByTagName()// 标签名
- getElementsByName()// 需注意,只有部分标签name可生效(表单,表单元素,img, iframe)
- getElementsByClassName()// 类名->ie8和ie8以下的ie版本中没有,可以多个class一起
- querySelector()// css选择器 在ie7和ie7以下的版本中没有
- querySelectorAll()//css选择器 在ie7和ie7以下的版本中没有
querySelector一般不用,因为它有个致命的问题就是选出来的不实时
- 查看元素节点
-
遍历节点树:
- parentNode->父节点(最顶端的 parentNode为 #document;
- childNodes->子节点们
- firstChild->第一个子节点
- lastChild->最后一个子节点
- nextSibling>后一个兄弟节点 previousSibling->前一个兄弟节点
-
基于元素节点树的遍历
- parentElement->返回当前元素的父元素节点(ie9及以下不兼容)
- children->只返回当前元素的元素子节点(ie4.5有兼容问题)
- node.childElementCount === node.children.length当前元素节点(ie9及以下不兼容)
- firstElementChild->返回的是第一个元素节点(ie9及以下不兼容)
- lastElementChild->返回的是最后一个元素节点(ie9及以下不兼容)
- nextElementSibling/ previousElementSibling->返回后一个/前一个兄弟元素(ie9及以下不兼容)
DOM基本操作
节点的类型(nodeType)
- 元素节点 ---- 1
- 属性节点 ---- 2
- 文本节点 ---- 3
- 注释节点 ---- 8
- document ---- 9
- DocumentFragment ---- 11 这是一个DOM元素占位符,用于将其子元素插入HTML文档树
节点的四个属性
- nodename
- 元素的标签名,以大写形式表示只读
- nodeValue
- Text节点或 Comment节点的文本内容,可读写
- nodeType
- 该节点的类型,只读(返回节点类型后面的数值)
- attributes
- Element节点的属性集合
节点的一个方法 Node.hasChildNodes();
DOM结构树
Node{
Document{
HTMLDocument
XMLDocument
}
CharacterData{
Text
Comment
}
Element{
HTMLElement{
HTMLHeadElement
HTMLBodyElement
HTMLTitleElement
HTMLParagraphElement
HTMLInputElement
HTMLTableElement
etc.
}
XMLElement
}
Attr
}
DOM结构树注意点
- getElementById方法定义在Document.prototype上,即Element节点上不能使用
- getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使用(XMLDocument,XHLElement)
- getElementsByTagName方法定义在Document.prototype和Element.prototype上,即既可以通过document.getElementsByTagName查找也可以通过div.getElementsByTagName查找
- HTMLDocument.prototype定义了一些常用的属性,document.body、document.head分别指代HTML文档中的标签
- Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,它总是指代元素
- getElementsByClassName和querySelector、querySelectorAll在Document.prototype和Element.prototype上均有定义
增加节点
- document.createElement() // 创建元素节点
- document.createTextNode() // 创建文本节点
- document.createComment()
- document.createDocumentFragment()
插入节点
- PARENTNODE.appendChild() // 把页面中的一个元素节点添加到另一个地方相当于剪切操作
- PARENTNODE.insertBefore(a, b) // 在PARENTNODE里面insert a before b
实现一个insertAfter功能
Element.prototype.insertAfter = function (targetNode, afterNode) {
var beforeNode = afterNode.nextElementSibling;
if(beforeNode == null) {
this.appendChild(targetNode);// 如果下一个节点为null,那么就直接插入
}else{
this.insertBefore(targetNode, beforeNode);// 找到下一个节点,用beforeNode即可
}
}
var div = document.getElementsByClassName('div')[0];
var b = document.getElementsByTagName('b')[0];
var span = document.getElementsByTagName('span')[0];
var p = document.createElement('p');// 控制台上用insertAfter操作这些变量来检测是否有用
删除节点
- PARENTNODE.removeChild() // 返回被remove的节点 (相当于谋杀)
- SELFNODE.remove() // 返回被remove的节点(相当于自尽)
替换节点
- PARENTNODE.replaceChild(new, origin)
Element节点的一些属性
- innerHTML
- innerText(老版本火狐不兼容)/ textContent(老版本IE不好使)
Element节点的一些方法
- ele.setAttribute(‘属性名’,‘属性值’) // 设置属性
- ele.getattribute(属性名) // 查看属性值
<div></div>
<script>
// dom 对象
var div = document.getElementsByTagName('div')[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
var count = 0;
div.onclick = function () {
count ++;
if(count % 2 == 1) {
this.style.backgroundColor = 'yellow';
this.style.width = "200px";
this.style.height = "50px"
this.style.borderRadius = "50%";
} else {
this.style.width = "100px";
this.style.height = "100px";
this.style.backgroundColor = "red";
}
}
</script>
简单的选项卡功能
<!doctype html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
display: none;
width:200px;
height:200px;
border:2px solid red;
}
.active{
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<button class="active">111</button>
<button>222</button>
<button>333</button>
<div class="content" style="display:block">1111</div>
<div class="content">2222</div>
<div class="content">3333</div>
</div>
<script>
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
for(var i = 0; i < btn.length; i++) {
(function (n) {
btn[i].onclick = function () {
for(var j = 0; j < btn.length; j++) {
btn[j].className = "";
div[j].style.display = "none";
}
this.className = "active";
div[n].style.display = "block";
}
}(i))
}
</script>
</body>
</html>
加速运动
<script>
var div = document.createElement('div');
document.body.appendChild(div);
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
var speed = 1;
var timer = setInterval(function () {
speed += speed/20;// 加速运动
div.style.left = parseInt(div.style.left) + speed + 'px';
div.style.top = parseInt(div.style.top) + speed + 'px';
if(parseInt(div.style.top) > 300 && parseInt(div.style.left) > 300) {
clearInterval(timer);
}
}, 20);
</script>
控制方块
var div = document.createElement('div');
document.body.appendChild(div);
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
document.onkeydown = function (e) {
switch(e.which) {
case 38:
div.style.top = parseInt(div.style.top) - 5 + "px";
break;
case 40:
div.style.top = parseInt(div.style.top) + 5 + "px";
break;
case 37:
div.style.left = parseInt(div.style.left) - 5 + "px";
break;
case 39:
div.style.left = parseInt(div.style.left) + 5 + "px";
break;
}
}