前端基础之BOM和DOM
一、BOM对象
BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作。使用BOM,开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
window 对象
- 所有浏览器都支持window对象
- 概念上讲:一个html文档对应一个window对象。
- 功能上讲:控制浏览器窗口的。
- 使用上讲:window对象不需要创建对象,直接使用即可。
Window对象方法
// alert() 显示带有一段消息和一个确认按钮的警告框 // confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框 // prompt() 显示可提示用户输入的对话框 // // open() 打开一个新的浏览器窗口或查找一个已命名的窗口 // close() 关闭浏览器窗口 // setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 // clearInterval() 取消由 setInterval() 方法设置的 timeout // setTimeout() 在指定的毫秒数之后调用函数或计算表达式 // clearTimeout() 取消由 setTimeout() 方法设置的timeout // scrollTo() 把内容滚动到指定的坐标
1、alert confirm prompt 以及open 函数
//----------------------alert confirm prompt------------------- //alert('aaa'); // 弹出写有aaa的窗口 /* var result = confirm ("您确定要删除吗?"); // 显示一个有确定和取消按钮的窗口 alert (result); // 如果选择的是 确定 按钮,则结果为true;选择的是 取消 按钮,则结果为false */ // prompt() //选写(可写可不写)两种参数:参数1:提示信息,参数2:输入框的默认值。返回值时用户输入的内容。 // var result = prompt("请输入一个数字!","hahaha"); // 当窗口弹出后默认写有 hahaha // alert(result); 方法讲解: // open 方法 打开一个新的窗口 并 进入指定的网址。 参数1:网址 // 调用方式1 // open("http://www.baidu.com"); // 参数1 什么都不填 就是打开一个新的窗口。 参数2 填入的是新窗口的名字( 一般可不填 )。 参数3 填入的是打开窗口的参数。 open('','','width = 200,resizable = no, height = 100'); // 新打开一个宽为200高为100的窗口 // close 方法 将当前文档窗口关闭。 // close();
2、ssertInterval,clearIntserval
setInterval()方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回分ID值可用作clearInterval() 方法的参数。
// 语法 setInterval(code,millisec) // 其中,code 为要调用分函数或要执行的代码串。 // millisec 周期执行或调用 code 之间的时间间隔,以毫秒计。
<input id="ID1" type="text" onclick="begin()"> <button onclick="end()">停止</button> // 一下代码写在js文件中 function showTime() { var nowd2 = new Date().toLocaleString(); var temp = document.getElementById("ID1"); temp.value = nowd2; } var clock; function begin() { if (clock == undefined) { showTime(); clock = setInterval(showTime, 1000); } } function end() { clearInterval(clock); }
3、setTimeout,clearTimeout
var ID = setTimeout(abc, 2000); // 只调用一次对应函数 clearTimeout(ID); function abc() { alert('aaa'); }
二、history 对象
history对象属性
history 对象包含用户( 在浏览器窗口中 ) 访问过的URL。
history 对象是window 对象的一部分,可通过window.history属性对其进行访问。
length // 返回浏览器历史列表中的URL数量
history 对象方法
back() // 加载 history 列表中分前一个 URL。 forward() // 加载 history 列表中的下一个URL。 go() // 加载 history 列表中的某个具体页面。
例子:
<a href="课堂练习.html">click</a> <button onclick="history.forward()">>>>></button> <button onclick="history.back()">back</button> <button onclick="history.go()">back1</button>
三、Location 对象
location 对象包含有关当前 URL 的信息。
location 对象是window 对象的一部分,可通过 window.location属性来访问。
location 对象方法:
location.assign(URL) //跳转到指定URL<> <br data-filtered="filtered">location.href='/classes/' // 要跳转的页面 location.reload() // 刷新当前页面 location.replace(newURL) // 注意与assign的区别,新的url页面替换当前的url页面
四、DOM对象( DHTML )
什么是 DOM ?
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 元素的对象和属性,以及访问它们的方法。
什么是 HTML DOM?
- HTML Document Object Model ( 文档对象模型 )
- HTML DOM 定义了访问和操作 HTML 文档的标准方法
- HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)
DOM 树
DOM 节点
节点类型
HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
整个文档就是一个文档节点
每一个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每个HTML 属性就是一个属性节点
其中,document 和 element 节点是重点。
节点关系
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为跟(root)
- 每个节点都有父节点、除了根节点(它没有父节点)
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
下图展示了节点树的一部分,以及节点之间的关系:
访问HTML 元素(节点),访问 HTML 元素等同于访问节点,我们可以以不同的方式来访问 HTML 元素。
节点查找
直接查找节点
document.getELementBYId("idname"); document.getElementsBYClassName("name"); document.getElementsBYTagName("标签名"); document.getElementsByName("name");
局部查找
<div id="div1"> <div class="div2">I am div2</div> <div name="yuan">I am div3</div> <div id="div3">I am div4</div> <p>hello p</p> </div> // 写在JS文件中的内容 var div1=document.getElementById("div1"); // 支持 var ele = div1.getElementsByTagName("p"); alert(ele.length); // 结果显示为 1 说明在id=div1中只有一个p标签 //支持 var ele1 = div1.getElementsByClassName("div2"); alert(ele1.length); // 结果显示为1 说明在id= div1 中只有一个class= div2的节点 // 不支持 var ele2 = div1.getElementById("div3"); alert(ele2.length); // 结果会报错:div1.getElementById is not a function at <anonymous> // 不支持 var ele3 = div1.getElementsByName("yuan"); alert(ele3.length); // 结果会报错:div1.getElementByName is not a function at <anonymous>
注意:设计到寻找元素,注意<script>标签的位置!因为有的时候<script>标签中的内容需要等到<body>中的内容加载完成之后才会有结果。
间接查找节点的各种方法
parentNode // 父节点 chileNodes // 所有子节点 firstChild // 第一个子节点 lastchild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 // 注意节点和标签的区别,主要记下面的 parentElement // 父节点标签元素 children // 所有子节点 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
注意:JS 中没有办法找到所有的兄弟标签
节点操作
创建节点:
createElement("标签名"):创建一个指定名称的元素。
例如:
var tag = document.createElement("input"); tag.setAttribute("type","text");
添加节点:
// 追加一个子节点(作为最后的子节点) somenode.appendChild("newnode") // 把增加的节点放到某个节点的前边 somenode.insertBefore("newnode", "某个节点");
删除节点:
removeChild() // 获得要删除的元素,通过父元素调用删除
替换节点:
somenode.replaceChild("newnode","某个节点")
节点属性操作:
1、获取文本节点的值:innerText innerHTML
2、attribute 操作
elementNode.setAttribute(name, value) elementNode.getAttribute("属性名") <---------> elementNode.属性名(DHTML) elementNode.removeAttribute("属性名")
3、value 获取当前选中的 value 值
1、input
2、select ( selectedIndex)
3、textarea
4、innerHTML 给节点添加 HTML 代码:
该方法不是w3c 的标准,但是主流浏览器支持
tag.innerHTML = "<p>要显示的内容</p>"
5、关于 class 的操作:
elementNode.className
elementNode.classList.add
elementNode.classList.remove
6、改变css样式:
<p id="p1">Hello word!</p>
document.getElementBYId("p1").style.color="blue";
.style.fontSize=48px;
DOM Event( 事件)
事件类型
onclick // 当用户点击某个对象是调用的事件句柄 ondbclick // 当用户双击某个对象时调用的事件句柄 onfocus // 元素获得焦点 练习:输入框 onblur // 元素失去焦点 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证。 onchange // 域的内容被改变 应用场景:通常用于表单元素,当元素内容被改变时触发。(三级联动) onkeydown // 某个键盘按键被按下 应用场景:当用户中最后一个输入框按下回车键的时候,表单提交 onkeypress // 某个键盘按键被按下并松开 onkeyup // 某个键盘按键被松开 onload // 一张页面或一幅图像完成加载 onmousedown // 鼠标按键被按下 onmousemove // 鼠标被移动 onmouseout // 鼠标从某元素移开 onmouseover // 鼠标移到某元素之上 onmouseleave // 鼠标从元素离开 onselect // 文本被选中 onsubmit // 确认按钮被点击
绑定事件方式
方式1: