自定义属性操作
-
getAttribute() 获取标签行内属性
-
setAttribute() 设置标签行内属性
-
removeAttribute() 移除标签行内属性
-
与element.属性的区别: 上述三个方法用于获取任意的行内(自定义)属性。
样式(css)操作
样式显示在标签行内
var div1 = document.getElementById('div1');
div1.style.width = '100px';
属性值是字符串,必须加上单位
类名操作
- 修改标签的className属性相当于直接修改标签的类名
var box = document.getElementById('box');
box.className = 'show';
class属性为什么用className来表示
class是关键字,定义变量,属性不能用关键字
创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
innerHTML与innerText
var box = document.getElementById('box');
box.innerHTML = '<p>新标签</p>';
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
节点操作
var body = document.body;
var div = document.createElement('div');
body.appendChild(div);
var firstEle = body.children[0];
body.insertBefore(div, firstEle);
body.removeChild(firstEle);
var text = document.createElement('p');
body.replaceChild(text, div);
节点属性
模拟文档树结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-83v8vdoI-1569567048505)(media/1497165666684.png)]
事件详解
注册/移除事件的三种方式
1.
btn.onclick = function() {
alert(2);
}
2.btn.addEventListener('click', function() {
alert(1);
});
3.兼容低版本浏览器
btn.attachEvent('onclick',回调函数)
事件的三个阶段
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
参数为false是冒泡 为true是捕获
事件对象的属性和方法
- event.type 获取事件类型
- clientX/clientY 所有浏览器都支持,窗口位置
- pageX/pageY IE8以前不支持,页面位置
- event.target || event.srcElement 用于获取触发事件的元素
- event.preventDefault() 取消默认行为
阻止事件传播的方式
- 标准方式 event.stopPropagation();
- IE低版本 event.cancelBubble = true; 标准中已废弃
常用的鼠标和键盘事件
- onmouseup 鼠标按键放开时触发
- onmousedown 鼠标按键按下触发
- onmousemove 鼠标移动触发
- onkeyup 键盘按键按下触发
- onkeydown 键盘按键抬起触发
BOM
BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等
BOM的顶级对象window
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
注意:window下一个特殊的属性 window.name
对话框
- alert()
- prompt()
- confirm()
页面加载事件
- onload
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行
}
- onunload
window.onunload = function () {
// 当用户退出页面时执行
}
定时器
setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数,只执行一次
// 创建一个定时器,1000毫秒后执行,返回定时器的标示
var timerId = setTimeout(function () {
console.log('Hello World');
}, 1000);
// 取消定时器的执行
clearTimeout(timerId);
setInterval()和clearInterval()
定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器,每隔1秒调用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
// 取消定时器的执行
clearInterval(timerId);
location对象
location对象是window对象下的一个属性,时候的时候可以省略window对象
location可以获取或者设置浏览器地址栏的URL
URL
统一资源定位符 (Uniform Resource Locator, URL)
- URL的组成
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
path:路径
由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query:查询
可选,用于给动态网页传递参数,可有多个参数,用'&'符号隔开,每个参数的名和值用'='符号隔开。例如:name=zs
fragment:信息片断
字符串,锚点.
location有哪些成员?
-
使用chrome的控制台查看
-
查MDN
案例
解析URL中的query,并返回对象的形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function getQuery(str) {
var query = {};
if (str.indexOf('?') > -1) {
//先获取索引
var index = str.indexOf('?');
//截取字符串,获取问号之后的内容
str = str.substring(index + 1);
//spilt(): 切割的意思,按照参数切割字符串
var arr = str.split('&');
//遍历字符串
for ( var i = 0; i < arr.length; i++) {
//对子串在进行切割 以=切割
var tempArr = arr[i].split("=");
// ['属性名', '属性值']
//通过对象的键值对形式,来存放url中请求参数的名称和值
query[tempArr[0]] = tempArr[1];
}
}
return query;
}
console.log(getQuery('https://cn.bing.com/search?q=mdn&qs=n&form=QBRE&sp=-1&pq=mdn&sc=8-3&sk=&cvid=BF229929A448494C8F29A5722DCC95D8'));
</script>
</body>
</html>
history对象
- back()
- forward()
- go()
navigator对象
- userAgent
通过userAgent可以判断用户浏览器的类型
- platform
通过platform可以判断浏览器所在的系统平台类型.