BOM与DOM

BOM和DOM和ECMAscript的关系:

 BOM是运行平台,BOM规则建立在ECMAscript的规则之上
 DOM是运行在平台上的页面
 ECMAscript是用来操作平台或运行在平台上的页面的工具

 BOM:浏览器对象模型(Browers Object MOdel)

window是js中的顶层对象,所有的全局都属于window;window窗口:提供了浏览器的窗口之间的操作。

window对象的常见方法:     alert(要显示的文本); 弹出信息框     prompt(提示对话框信息); 弹出输入框,点击确定,返回字符串,点击取消,返回null     confirm(提示文字); 点击确定返回true,点击取消返回false       open(url,name,feature,replace);         open('http://www.baidu.com','_blank','width=300,height=300')                       //谷歌会默认把系统自动打开的新网页阻止掉,但不阻止通过事件打开的网页     close();关闭浏览器。 window对象下内置的子对象: history对象:该对象包含浏览器访问过的url。         该对象的属性:         history.length;返回历史记录的数量         该对象的方法:         history.back();后退,加载前一个url。         history.forward();前进,需要后退一下之后,才有前进的方向         history.go(num);参数为正,前进相应的数目,为负,后退相应的数目,为0,刷新 location对象:包含当前url的相关信息,而history对象不能具体反映url的相关信息。         该对象的属性:         location.href;设置或返回完整的url         location.search;返回url?后面的查询部分         location.hash;是一个可读写的字符串,是url的锚部分(从#开始的部分)哈希         该对象的方法:         location.reload();刷新页面的方法,一般情况下,传递一个true,不使用缓存刷新。缓存?         location.assign(url);加载新页面,当url为空字符时,加载当前页面 window.onload / onscroll/onresize 事件  onload当文档加载完成后执行一些操作
1 window.onload = function(){
2         console.log("页面加载完成")
3     }
onscroll当页面发生滚动时执行一些操作
1 window.onload = function(){
2         console.log(1)            //当页面发生滚动时,打印1
3     }
onresize当窗口大小发生改变时执行一些操作
1 window.onresize = function(){
2         console.log(1)            //当窗口大小发生改变时,打印1
3     }

DOM:文档对象模型(Document Object MOdel )

改变元素的内容(innerHTML),属性(value),样式(width,height,background) DOM中的选择器

元素节点选择器:

id:返回的是单个对象;document.getElementById(   )

class:返回的是数组对象,如果要使用其中的元素,通过索引解析;document.getElementsByClassName(   )

tagname:返回的是数组对象,如果要使用其中的元素,通过索引解析;document.getElementsByTagName(   )

name:返回的是数组对象,如果要使用其中的元素,通过索引解析;document.getElementsByName(     )

querySelector:返回的是单个对象;document.querySelector(    )

querySelectorAll:返回的是数组对象,如果要使用其中的元素,通过索引解析;document.querySelectorAll(   )

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>选择器</title>
 7     </head>
 8     <body>
 9         <div id="box">1</div>
10         <div id="box">2</div>
11         <div id="box">3</div>
12         <div class="msg">
13             <div class="sbox">
14                 <h2>标题3</h2>
15                 <h2>标题4</h2>
16             </div>
17             <h2>标题1</h2>
18             <h2>标题2</h2>
19             
20         </div>
21         <div class="cont">4</div>
22         <div class="cont">5</div>
23         <div class="cont">6</div>
24         <span>7</span>
25         <span>8</span>
26         <span>9</span>
27         <input type="text" name="user">
28         <input type="text" name="user">
29         <input type="text" name="pass">
30     </body>
31     <script>
32         //id
33         var box = document.getElementById("box");
34         console.log(box);
35         //class
36         var acont = document.getElementsByClassName("cont");
37         console.log(acont);
38         console.log(acont[0]);
39         console.log(acont[0].innerHTML);
40         console.log(acont.innerHTML);
41         //tagName
42         var aspan = document.getElementsByTagName("span");
43         console.log(aspan);
44         console.log(aspan[0]);
45         //name
46         var auser = document.getElementsByName("user");
47         console.log(auser);
48         //querySelector
49         var ele = document.querySelector("#box");
50         var ele = document.querySelector(".cont");
51         var ele = document.querySelector("span");
52         var ele =document.querySelector(".msg h2");
53         var ele =document.querySelector(".msg>h2")
54         console.log(ele);
55         //querySelectorAll
56         var ele = document.querySelectorAll("#box");
57         var ele = document.querySelectorAll(".cont");
58         var ele = document.querySelectorAll("span");
59         var ele = document.querySelectorAll(".msg h2");
60         var ele = document.querySelectorAll(".msg>h2");
61         console.log(ele);
62     // 父选子:获得子元素节点的集合,不包含空白节点
63         var omsg = document.querySelector(".msg");
64         console.log(omsg.children);
65     // 子选父:获得父元素节点
66         var osbox = document.querySelector(".sbox");
67         console.log(osbox.parentNode);
68     // 第一个子
69         var omsg = document.querySelector(".msg");
70         console.log(omsg.firstElementChild)
71     // 最后一个子
72         var omsg = document.querySelector(".msg");
73         console.log(omsg.lastElementChild)
74     // 上一个兄弟
75         var omsg = document.querySelector(".msg");
76         console.log(omsg.previousElementSibling)
77     // 下一个兄弟
78         var omsg = document.querySelector(".msg");
79         console.log(omsg.nextElementSibling)
80     </script>
81 </html>

其他节点选择器:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <span>qwe</span>
11     <div class="box"><span>1</span>
12         <p>2</p>
13         hello
14         <!-- 这是注释 -->
15         <em>3</em>
16     </div>
17     <span>zxc</span>
18 </body>
19 <script>
20     // 其他节点选择器:
21         // 关系:
22         // 父选子:获得所有子节点的集合,包括空白节点
23             // var obox = document.querySelector(".box")
24             // console.log(obox.childNodes)
25         // 上一个兄弟:
26             // var obox = document.querySelector(".box")
27             // console.log(obox.previousSibling)
28         // 下一个兄弟:
29             // var obox = document.querySelector(".box")
30             // console.log(obox.nextSibling)
31         // 第一个子:
32             // var obox = document.querySelector(".box")
33             // console.log(obox.firstChild)
34         // 最后一个子:
35             var obox = document.querySelector(".box")
36             console.log(obox.lastChild)
37 </script>
38 </html>

DOM属性的基本操作:

元素的属性:内置、非内置

非内置属性需要通过一些节点的方法进行操作,注意:节点的方法,前缀一定是节点     getAttribute() :获取 元素的属性     setAttribute():设置/修改 元素的属性,低版本的IE不兼容;接收两个参数,属性名和属性值     removeAttribute():删除 元素的属性,低版本的IE不兼容 节点: 通过遍历所有子节点,将空白节点过滤掉,得出所有的元素节点;  文档节点:整个文档;ownerDocument:获取该节点的文档根节点,相当与 document 元素节点:每个HTML标签 文本节点:包含在HTML元素中的文本 属性节点:每一个HTML属性;attributes:获得所有属性节点,返回一个数组 注释节点:注释                  节点类型(nodeType)        节点名字(nodeName)       节点值(nodeValue)   元素节点         1                                        标签名                            null   文本节点         3                                          #text                             文本   注释节点         8                                     #comment                    注释的文字   文档节点         9                                      #document                       null   属性节点         2                                        属性名                           属性值 DOM元素的基本操作  创建:createElement()  配合  appendChild()    将创建好的元素,插入到某个标签内的最后  删除:removeChild()  配合  parentNode;  remove()    直接删除当前元素     document.body.removeChild(div); 样式:
1  获取非行内样式(兼容问题)
2     function getStyle(obj,attr){             //获取非行间样式,obj是对象,attr是值
3         if(obj.currentStyle){                //针对ie获取非行间样式
4             return obj.currentStyle[attr];
5         }else{
6             return getComputedStyle(obj,false)[attr];   //针对非ie
7         };
8     };

尺寸类样式:

 clientWidth/clientHeight:可视内容区域的宽高

scrollWidth/scrollHeight:包括滚动区域的宽高

offsetWidth/offsetHeight:可视边框区域的宽高

offsetLeft/offsetTop:元素相对于包含块偏移的位置

scrollLeft/scrollTop:滚动的left和top

offsetParent:获取当前元素的包含块

上一篇:LCalendar日期选择插件


下一篇:Cnodejs 内容区域数据采集