HTML DOM和BOM常用操作总结

时间:2021-03-05 08:01:03

 JavaScript Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
//HTML DOM常用操作
getElementById()                        //返回带有指定 ID 的元素。
element.getElementsByTagName()          //返回拥有指定标签名的所有子元素的集合。
getElementsByClassName()                //返回包含带有指定类名的所有元素的节点列表。
element.appendChild()                   //向元素添加新的子节点,作为最后一个子节点。
element.removeChild()                   //从元素中移除子节点。
element.replaceChild()                  //替换元素中的子节点。
createAttribute()                       //创建属性节点。
createElement()                         //创建元素节点。
createTextNode()                        //创建文本节点。
element.getAttribute()                  //返回元素节点的指定属性值。
element.setAttribute()                  //把指定属性设置或更改为指定值
element.offsetHeight                    //返回元素的高度。
element.offsetWidth                     //返回元素的宽度。
element.offsetLeft                      //返回元素的水平偏移位置。
element.offsetTop                       //返回元素的垂直偏移位置。
element.scrollHeight                    //返回元素的整体高度。
element.scrollLeft                      //返回元素左边缘与视图之间的距离。
element.scrollTop                       //返回元素上边缘与视图之间的距离。
element.scrollWidth                     //返回元素的整体宽度。
element.clientHeight                    //返回元素的可见高度。
element.clientWidth                     //返回元素的可见宽度。
element.childNodes                      //返回元素子节点的 NodeList。
element.className                       //设置或返回元素的 class 属性。
element.id                              //设置或返回元素的 id。
element.innerHTML                       //设置或返回元素的内容。
element.insertBefore()                  //在指定的已有的子节点之前插入新节点。

//HTML BOM常用操作
window.open()                           //打开窗口。返回一个指向新窗口的引用。
window.close()                          //关闭窗口。
window.resizeTo()                       //调整窗口尺寸到指定值
window.resizeBy()                       //增加窗口尺寸,增加量为指定值
window.moveTo()                         //移动窗口
window.moveBy()                         //移动窗口,坐标增加量为指定值
window.innerHeight                      //浏览器窗口的内部高度
window.innerWidth                       //浏览器窗口的内部宽度
window.setTimeout()                     //超时调用
window.clearTimeout()                   //取消超时调用
window.setInterval()                    //间歇调用
window.clearInterval()                  //取消间歇调用
window.alert()                          //警告框
window.confirm()                        //确认对话框。返回布尔值,点击确定返回true,点击取消返回false
window.prompt()                         //提示框。点击确定返回文本框的值,点击取消返回null
window.print()                          //打印对话框
window.find()                           //查找对话框
location.href                           //完整URL,如//www.wellintech.com:8080/index.html?name='Michael'&age='23'#contents
location.protocol                       //协议名,如location.hostname
location.host                           //服务器名及端口号,如www.yinzitang.com:8080
location.port                           //端口号,如8080
location.pathname                       //目录和文件名,如/path/to/homepage/index.html
location.search                         //查询字符串,以问好开头,如?name='peter'&age='20'
location.hash                           //散列值,即#号后面,如#contents
location.assign()                       //打开指定URL,并在历史记录中生成一条记录。
                                        //等价于location.href = URL和window.location = URL。
location.replace()                      //打开指定URL,但不生成新的历史记录。
location.reload()                       //重新加载当前页面。默认以最有效的方式加载,可能会请求到缓存。
location.reload(true)                   //重新加载当前页面,强制从服务器重新加载。
navigator.userAgent                     //用户代理字符串
navigator.plugins                       //安装插件信息的数组
navigator.onLine                        //检测设备在线还是离线
screen.availWidth                       //可用的屏幕宽度。以像素计,减去界面特性,比如窗口任务栏。
screen.availHeight                      //可用的屏幕高度。以像素计,减去界面特性,比如窗口任务栏。
screen.width                            //屏幕的像素宽度
screen.height                           //屏幕的像素高度
screen.colorDepth                       //颜色位数

history.go()                            //跳转到任意历史记录。
                                        //若传入整数,正数为前进,负数为后退。
                                        //若传入字符串,则跳转到历史记录中包含该字符串的第一个位置。
history.back()                          //后退一页
history.forward()                       //前进一页
history.length                          //历史记录的数量。对于窗口中第一个打开的页面而言,其history.length为0。
history.pushState()                     //历史状态管理。将新的状态信息加入历史状态栈。
history.replaceState                    //历史状态管理。重写历史状态。