外置对象
BOM 和 DOM
- BOM：Bowser Object Model 浏览器对象模型，主要提供了操作浏览器的一系列与方法
**BOM的核心对象 window 对象，**JS的顶层对象,可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
window对象在网页初始化的过程中自动创建，每打开一个窗口，都对应一个window对象 - DOM：Document Object Model 文档对象模型，主要提供了操作HTML文档的属性和方法
核心对象 document对象，其本身也是window对象的属性使用时，可以省略window
et：
document.write();
window.document.write();
window对象
window对象
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
-
作用：浏览器窗口对象
全局变量和全局函数，都是window对象的属性和方法，window在使用时可以省略var a = 10； window.b = 10； conson.log(a,window.b)； function sum(a,b) { } window.sum = function () {}; sum(); window.sum(); -
对话框
alert(' ');警告框window.alert()；
prompt(' ');输入框window.prompt();
confirm('是否确定');确认框 返回布尔值，只有当用户点击’确定’时，才返回true，其他都返回时false
open()打开一个新的浏览器窗口或查找一个已命名的窗口。参数为url
close()关闭浏览器窗口。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> var a=100; function sum(a,b) { return a+b; } console.log(a,sum(10,20)); console.log(window.a,window.sum(10,20)); console.log(window); //对话框 alert('window的方法alert'); //接收返回值 var res=window.confirm('是否确认'); console.log(res); //prompt 参数1 : 提示信息. 参数2:输入框的默认值. 返回值是用户输入的内容. var result = prompt("请输入一个数字!","haha"); alert(result); //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址. //调用方式1 //open("http://www.baidu.com"); //参数1 什么都不填 就是打开一个新窗口. 参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数. open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口 //close方法 将当前文档窗口关闭. close(); </script> </head> <body> </body> </html> -
定时器方法
作用：按照指定的周期或者时间间隔，来调用函数或者计算表达式-
周期性定时器 / 间歇调用
特点：每隔一段时间就执行一遍代码
语法：
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。var timer = setInterval(fun,duration); window.setInterval(); 参数： fun：表示要执行的操作，可以是函数，也可以直接使用匿名函数 duration：时间间隔，隔多少次时间执行一次代码，单位是ms（毫秒） 返回值： timer：表示当前定时器的ID，就是一个整数，可以区分不同的定时器，清除定时器时使用清除定时器
clearInterval(timer);
参数：定时器的ID<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> //1. 间歇调用 var timer; function startInterval(){ //开启定时器 timer = setInterval(function (){ alert("不要急，后面还有"); },1000); } function stopInterval(){ clearInterval(timer); } </script> </head> <body> <button onclick="startInterval()">开始</button> <button onclick="stopInterval()">结束</button> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1{ width: 200px; height: 50px; } </style> </head> <body> <input type="text" id="id1" onclick="begin()"> <button onclick="end()">停止</button> <script> function showTime() { var current_time=new Date().toLocaleString(); //得到输入框的对象 var ele=document.getElementById("id1") //设置输入框显示的内容 ele.value=current_time } var clock1; function begin() { if(clock1==undefined){ showTime(); //返回一个定时器对象 clock1=setInterval(showTime,1000) } } function end() { clearInterval(clock1); //清空对象 clock1=undefined } </script> </body> </html> -
一次性定时器 / 超时调用
特点：在指定的时间间隔之后，执行一次性操作
语法：
var timer = setTimeout(fun,delay);
参数：
fun：要执行的操作
delay：时间间隔，隔多久再执行响应操作
返回值：
timer：定时器ID，在清除定时器时使用
清除定时器：
clearTimeout(timer);<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> var timerID ; function startTimeout(){ //开启超时调用 timerID = setTimeout(function(){ alert("已经三秒了"); },3000); } function stopTimeout(){ clearTimeout(timerID); } </script> </head> <body> <button onclick="startTimeout()">开始</button> <button onclick="stopTimeout()">结束</button> </body> </html>
-
-
window中的属性
window中的属性，本身又是一个对象screen对象
访问屏幕对象：
-console.log(screen);
-console.log(window.screen);
作用：获取客户端显示器相关的信息
属性：
width / height获取屏幕的宽高
availWidth / availHeight获取屏幕实际可用的宽高（减去任务栏之后的值）<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> console.log(screen); console.log(screen.width,screen.height); console.log(screen.availWidth,screen.availHeight); </script> </head> <body> </body> </html>
history 对象
history对象
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
作用：包含当前窗口访问过的所有URL
属性&方法：
length属性：获取当前窗口访问过的url的数量
back()后退
forward()前进
go(num)跳转几步 ,num 取值为整数，可正可负,在当前的网页的基础上前进/后退几步<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> function getLength(){ console.log(history.length); } </script> </head> <body> <h1><a href="#">Index</a></h1> <button onclick="getLength()">获取length</button> <button onclick="history.forward()">前进</button> <button onclick="history.back()">后退</button> <button onclick="history.go(1)">go前进</button> <button onclick="history.go(-1)">go后退</button> </body> </html>
location 对象
location对象
Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
作用：location 保存的是浏览器地址栏的信息
属性：
href：获取当前窗口正在浏览的网页url, 如果给href属性赋值，就相当于页面跳转
方法：
location.assign(URL)跳转到URL链接
location.replace(newURL)URL替换当前页面 //注意与assign的区别
reload()重载，相当于刷新
reload(true): 忽略缓存，从服务端加载
reload(false): 从缓存中加载（默认）<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> </script> </head> <body> location.assign("http://www.baidu.com") //跳转到百度，可以返回前一个页面 location.replace("http://www.baidu.com") //覆盖当前页面 ，不可以返回 <button onclick="console.log(location.href);">获取当前url</button> <button onclick="location.href='http://www.baidu.com';">百度</button> <button onclick="location.reload(true);">重新加载</button> </body> </html>navigator对象
作用：保存浏览器相关的信息
属性：userAgent：显示信息<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script> console.log(navigator); </script> </head> <body> </body> </html>
DOM（document对象）
-
介绍：document对象，是DOM中的顶层对象，封装了所有的HTML元素相关的属性，方法以及事件
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。 -
节点（对象）
网页在加载过程中，会自动生成一颗节点数（DOM树），DOM树会封装网页上所有的内容，网页中的每一个元素，每一段文本，甚至注释，都会被封装成DOM树中单独的一个节点,根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)-
节点分类
文档节点- 表示整个文档,整个文档是一个文档节点(document对象)
元素节点- 网页中的一个元素（标签）,每个 HTML 元素是元素节点(element 对象)
属性节点- 标签中的一个标签属性,每个 HTML 属性是属性节点(attribute对象)
文本节点- 表示标签中的文本内容,HTML 元素内的文本是文本节点(text对象)
注释节点- 网页中的注释,注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
-
节点操作
获取节点
读取节点
修改节点
删除节点
创建节点 -
获取元素节点
document.getElementByTagName('a');
通过制定的标签名获取元素节点，返回节点列表（数组），可以根据下标获取具体的元素节点对象document.getElementsByClassName(' ');
根据元素class属性值查找，返回节点列表document.getElementsByName(' ');
根据元素name属性值查找，返回节点列表，一般用户查找表单元素document.getElementById(' ');
根据元素id属性值查找，返回具体的元素节点对象
注意：
脚本标签的书写位置，要放在body之后- 局部查找：
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); 支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); 支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); 不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); 不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <h1 class="c1">杨超越</h1> <h1 id="wxy">吴宣仪</h1> <h1 class="c1">应采儿</h1> <p class="c1">谢娜</p> 兴趣 ：<input type="checkbox" name="hobby" class="c1">抽烟 <input type="checkbox" name="hobby">喝酒 </body> <script> //1. 获取元素节点对象 var elems = document.getElementsByTagName('h1'); console.log(elems,elems[0]); //2. 根据class属性值获取元素节点列表 var elems2 = document.getElementsByClassName('c1'); console.log(elems2); //3. 根据name属性值获取元素节点 var elems3 = document.getElementsByName('hobby'); console.log(elems3); //4. 通过id获取元素节点 var h1 = document.getElementById('wxy'); console.log(h1); //修改元素节点的内容 elems[0].innerHTML = "<span>就是pick吴宣仪</span>"; elems[1].innerText = "<span>就是pick吴宣仪</span>"; </script> </html>
-
DOM属性：
innerHTML：修改/获取元素节点的HTML文本，可识别标签(如果打印 ，标签也打印出来)
innerText：修改/获取元素节点中的普通文本，不能识别标签（只是识别标签中的文本）
value：该属性只针对表单控件，允许获取或修改表单控件的值<div class="div1"> <p name="littleP" class="p1">hello p</p> <div class="div2">hello div <div>div3</div> <a href="">click</a> </div> <span>span</span> </div> <script> var ele4=document.getElementsByName("littleP")[0]; var ele5=ele4.nextElementSibling; console.log(ele5.innerHTML); //hello div // <div>div3</div> // <a href="">click</a> console.log(ele5.innerText); //hello div //div3 //click </script>
创建网页，添加div，文本框，按钮，
点击按钮时，实现将文本框输入的内容以一级标题的形式显示在div中<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <div></div> <input type="text" name="utext"> <button onclick="showText()">显示</button> </body> <script> function showText(){ //1. 获取元素节点 var div = document.getElementsByTagName('div')[0]; var input = document.getElementsByName('utext')[0]; //2. 传值，添加新的标签 div.innerHTML = "<h1>"+ input.value + "</h1>"; } </script> </html> -
读取节点信息
- 节点类型
属性 ：nodeType
值 ：
1表示元素节点
2表示属性节点
3表示文本节点
8表示注释节点
9表示文档节点 - 获取节点名称
属性 ：nodeName
取值情况 ：
元素节点&属性节点返回元素名 或者 属性名
文本节点返回 #text
注释节点返回 #comment
文档节点返回 #document
节点对象的层次属性(导航属性)
-
parentNode(推荐)
表示获取当前节点的父节点 -
childNodes
表示获取当前节点下所有的子节点，返回子节点数组
注意 ：文本节点和属性节点都会作为当前元素节点的
子节点, 换行和空格都会作为空的文本节点计算在内 -
children
返回当前节点的所有子节点数组
注意 ：只返回子元素节点，不包含文本节点和属性节点 -
nextSibling表示下一个兄弟节点（如果两个标签写在两行，通过前一个节点寻找下一个标签，将的到 # text （为后面的空内容），而不是下一行的标签，）<h1></h1> 文本 <div></div>注意 ：nextElementSibling（在不同行的时候使用）
表示下一个元素兄弟节点 -
previousSibling表示上一个兄弟节点注意 ：previousElementSibling（在不同行的时候使用）
表示上一个元素兄弟节点 -
attributes获取当前元素节点对象的所有属性节点集合<input type="" value="" maxlength="">推荐导航属性：
parentElement// 父节点标签元素
children// 所有子标签
firstElementChild// 第一个子标签元素
lastElementChild// 最后一个子标签元素
nextElementtSibling// 下一个兄弟标签元素
previousElementSibling// 上一个兄弟标签元素<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <div> <h1 style="text-align:center;color:red;">节点的层次属性</h1> div中的普通文本 <p>p元素中的文本</p> </div> <script> //1. 获取元素节点 var div = document.getElementsByTagName('div')[0]; var h1 = document.getElementsByTagName('h1')[0]; var p = document.getElementsByTagName('p')[0]; //2. 获取元素的父节点对象 console.log(div.parentNode); console.log(h1.parentNode); //3. 获取子节点数组 console.log(div.childNodes); console.log(div.children); for(var i = 0;i < div.childNodes.length; i ++){ //console.log(div.childNodes[i]); //获取子节点 console.log(div.childNodes[i].nodeType,div.childNodes[i].nodeName); } //4. 兄弟节点 //获取h1的下一个兄弟节点 console.log(h1.nextSibling); console.log(h1.nextElementSibling);//下一个元素兄弟节点 console.log(p.previousSibling); console.log(p.previousElementSibling); //5. 属性节点的操作 console.log(h1.attributes); //获取属性节点 console.log(h1.attributes[0].nodeType,h1.attributes[0].nodeName); </script> </body> </html>
6970
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
