JS之-BOM模型-DOM模型

  • A+
所属分类：Web前端
摘要

览器对象模型（BOM） Broswer object model（整合js和浏览器）所有浏览器都支持 window 对象。它表示浏览器窗口。
便宜好用的国外VPS推荐

一、BOM浏览器对象模型

览器对象模型（BOM） Broswer object model（整合js和浏览器）

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

一些常用的Window方法：

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度
  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口 (只能关闭用 js 的window.open()打开的页面)

window的子对象

navigator对象：浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName;　　		// Web浏览器全称 navigator.appVersion;　　		// Web浏览器厂商和版本的详细字符串 navigator.userAgent;　　		// 客户端绝大部分信息 navigator.platform;　　　      // 浏览器运行所在的操作系统

screen对象：屏幕对象，不常用。

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

history对象：浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面。

history.forward();  	// 前进一页，其实也是window的属性，window.history.forward() history.back();  	// 后退一页

location对象：window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href;   	  // 获取当前url location.href="URL";  // 跳转到指定页面 location.reload(); 	  //重新加载页面,就是刷新一下页面

弹出框

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框：警告框经常用于确保用户可以得到某些信息。

alert("警告！！？");

确认框：当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

点击确认，那么返回值为 true。点击取消，那么返回值为 false。

confirm("请确认？");

提示框：如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。

prompt("请在下方输入","你的答案");

计时相关*

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout( )：一段时间后做一些事情

setTimeout('confirm("你好");',3000);  			// 3秒之后执行前面的js代码 setTimeout(confirm('xxx'),3000);  				 // 如果写的不是字符串,会直接执行 setTimeout(function(){confirm('xxx')},3000);  	 // 最好写成函数  var a = setTimeout(function(){console.log('xxx')},3000); // a是浏览器来记录计时器的一个随机数字 clearTimeout(a);  	// 清除计时器,通过这个数字可以清除

setInterval：计时器,每隔一段时间做某些事情

var a = setInterval(function(){console.log('xxx')},3000);  // 每隔 3 秒打印一次xxx clearInterval(a);	// 清除计时器

二、DOM文档对象模型

文档对象模型（DOM） Document object model (整合js，css，html)

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会创建页面的文档对象模型

HTML DOM 模型被构造为对象的树。

JavaScript 可以通过DOM创建动态的 HTML：

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）

选择器

和css一样，你想操作某个标签需要先找到它

直接查找

document.getElementById           // 根据ID获取一个标签 document.getElementsByClassName   // 根据class属性获取（可以获取多个元素，所以返回的是一个数组） document.getElementsByTagName     // 根据标签名获取标签合集  // 示例： var a = document.getElementById('d1');  		// 获取id属性值为d1的标签  拿到的直接是标签对象 var a = document.getElementsByClassName('c1');  // 获取class值为c1的所有标签  拿到的是数组 var a = document.getElementsByTagName('div');  	// 获取所有div标签  拿到的是数组  <div class="c1" id="d1">     Holle </div>  <div class="c1" id="d2">     Word </div>

间接查找

var a = document.getElementById('d1'); a.parentElement; 		// 获取a这个标签的父级标签  children                 所有子标签 firstElementChild        第一个子标签元素 lastElementChild         最后一个子标签元素 nextElementSibling       下一个兄弟标签元素 previousElementSibling   上一个兄弟标签元素

节点操作

创建节点（创建标签）

var a = document.createElement('标签名称');   // 示例,创建a标签 var a = document.createElement('a');

添加节点

// 添加节点,添加到了最后 var a = document.createElement('a');		// 创建a标签 var dd = document.getElementById('dd');		// 找到 id=dd 的标签 dd.appendChild(a); 		// 将创建的a标签添加到dd这个div标签里面的最后.   // 在某个节点前面添加节点 父级标签.insertBefore(新标签,某个儿子标签)  // 示例: var dd = document.getElementById('dd');  	// 找到父级标签 var a = document.createElement('a');    	// 创建一个新的a标签 var d2 = dd.children[1];  	// 找到父级标签下的某个儿子标签 dd.insertBefore(a,d2);   	// 将a标签插入到上面这个儿子标签的前面.

删除节点

var dd = document.getElementById('dd');		// 父节点 dd.removeChild(d2);  	// 父级标签中删除子标签

替换节点

var dd = document.getElementById('dd');  	// 找到父级标签 var a = document.createElement('a');  		// 创建a标签 a.innerText = '百度';  		   // 给 a 标签添加文本内容 var d1 = dd.children[0];  		// 找到要被替换的子标签 dd.replaceChild(a,d1);  		// 替换

文本操作

var d1 = document.getElementById('d1');		// 找到标签 d1.innerText;		// 查看标签 d1 中的文本内容  // 设置文本内容 d1.innerText = "<a href=''>百度</a>";   d1.innerHTML = "<a href=''>百度</a>";  	// 能够识别标签

属性操作

var d1 = document.getElementById('d1');		// 找到d1标签 d1.setAttribute('class','cc');				// 修改class属性 divEle.removeAttribute("class")				// 删除属性  // 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的 imgEle.src imgEle.src="..."

值操作

var inp = document.getElementById('username'); inp.value;  				// 查看值 inp.value = 'xiaoyang'; 	// 设置值  // 示例：选择框 <select name="city" id="city">     <option value="1">四川</option>     <option value="2">上海</option>     <option value="3">北京</option> </select>  var inp = document.getElementById('city'); inp.value;  		// 查看值 inp.value = '1';  	// 设置值

class的操作

var d = document.getElementById('dd'); 		// 找到标签  d.classList;  					// 获得这个标签的class属性的所有的值 d.classList.add('xx2');  		// 添加class值 d.classList.remove('xx2'); 		// 删除class值 d.classList.contains('xx2');  	// 判断是否有某个class值,有返回true,没有返回false d.classList.toggle('xx2');  	// 有就删除,没有就增加

css操作

var d = document.getElementById('dd');	// 找到标签  // 有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写 d.style.backgroundColor = 'deeppink';   d.style.height = '1000px'

事件

当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。 ondblclick     当用户双击某个对象时调用的事件句柄。  onfocus        元素获得焦点。        // 练习：输入框 onblur         元素失去焦点。        应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange       域的内容被改变。      应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）  onkeydown      某个键盘按键被按下。   应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress     某个键盘按键被按下并松开。 onkeyup        某个键盘按键被松开。 onload         一张页面或一幅图像完成加载。 onmousedown    鼠标按钮被按下。 onmousemove    鼠标被移动。 onmouseout     鼠标从某元素移开。 onmouseover    鼠标移到某元素之上。  onselect      在文本框中的文本被选中时发生。 onsubmit      确认按钮被点击，使用的对象是form。

绑定事件的方式有两种：

方式1:

<div id="d1" class="c1" onclick="func();"></div>	/* 当点击div标签就调用func方法 */  <script>     function func() {         var d = document.getElementById('d1');		// 找到id=d1的标签         d.style.backgroundColor = 'yellow';			// 并修改css背景颜色为黄色     }  </script>

方式2：

<div id="d1" class="c1"></div>  <script> 	var d = document.getElementById('d1');		// 找到id=d1的标签 	d.onclick = function () {					// 当此标签触发点击调用匿名函数     	d.style.backgroundColor = 'yellow';		// 函数修改css背景颜色为黄色 	} </script>

**事件里面的 this: **表示当前标签对象

方法一：

<div class="c1" id="d1" onclick="func(this);"></div>	/* 触发点击div标签就调用func方法 */  <script>     function func(t){         t.style.backgroundColor = 'yellow';			// 不用查找要修改的标签，t 指带当前标签     } </script>

方法二：

<div class="c1" id="d1"></div>  <script>     var d = document.getElementById('d1');			// 找到标签     d.onclick =  function (){						// 触发点击调用匿名函数         this.style.backgroundColor = 'yellow';		// 表示当前标签修改css背景颜色     } </script>

onblur 和 onfocus 事件

<div class="c1" id="d1"></div> <input type="text" id="username">  <script>     // onfocus 获取光标时触发的事件     var inp = document.getElementById('username');	// 获取input标签     var d1 = document.getElementById('d1');			// 获取div标签     inp.onfocus =  function (){						// input标签触发onfocus事件，调用匿名函数         d1.style.backgroundColor = 'yellow';		// 对div标签的css背景颜色进行改变     }          // onblur 失去光标时触发的事件     inp.onblur = function (){             d1.style.backgroundColor = 'red';         } </script>

onchange 事件，域内容发生变化时触发

<select name="city" id="city">     <option value="1">上海</option>     <option value="2">北京</option>     <option value="3">四川</option> </select>  <script>     var city = document.getElementById('city');     city.onchange = function (){         console.log(this.options[this.selectedIndex].innerText)		// 打印所选中的内容         // this.options ——>指select标签下的素有option标签         // this.selectedIndex——>指被选中的标签在所有标签中的索引值     } </script>
便宜好用的国外VPS推荐