BOM与DOM

2024-03-29 17:50:22

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：获取当前元素的包含块

码农公寓

相关文章