首页 / JAVASCRIPT / JavaScript DOM 对象深入了解

JavaScript DOM 对象深入了解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript DOM 对象深入了解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含17680字，纯文字阅读大概需要26分钟。

内容图文

什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样的道理。否则就是单纯的在语法上做研究了。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

JavaScript DOM 对象深入了解 - 文章图片

查找元素

1、直接查找

方法名	描述
getElementById(id) (document)	获取有指定惟一ID属性值文档中的元素
getElementsByTagName_r(name)	返回当前元素中有指定标记名的子元素的数组
document.getElementsByClassName	根据属性获取标签集合
getAttribute(name)	返回元素的属性值，属性由name指定

1>document.getElementById('id')

<body>
 <div id="zhang">
 不帅
 </div>
 
 <script type="text/javascript">
 var i = document.getElementById('zhang'); //查找指定的id
 i.innerText = '很帅'; //innerText修改指定的字符串
 </script>
</body>

显示效果，当我们打开IE的时候不帅就会被修改为很帅

2>getElementsByTagName_r(name)

<body>
 <div name="zhang">
 不帅
 </div>
 
 <script type="text/javascript">
 var i = document.getElementByTagNmae('zhang'); //查找指定的name名
 i.innerText = '很帅'; //innerText修改指定的字符串
 </script>
</body>

其显示效果一样

3>document.getElementsByClassName

<body>
 <div class="zhang">
 不帅
 </div>
 
 <script type="text/javascript">
 var i = document.getElementClassName('zhang'); //查找指定的class名
 i.innerText = '很帅'; //innerText修改指定的字符串
 </script>
</body>

2、间接查找

属性名	描述
childNodes	返回当前元素所有子元素的数组
childNodes	返回当前元素的所有子元素
firstChild	返回当前元素的第一个下级子元素
lastChild	返回当前元素的最后一个子元素
nextSibling	返回紧跟在当前元素后面的元素
previousSibling	返回紧跟在当前元素前面的元素
parentElement	返回其父节点标签元素
children	返回其所有子标签
firstElementChild	返回第一个子标签元素
lastElementChild	返回最后一个子标签元素
nextElementtSibling	返回`下一个兄弟标签元素`
previousElementSibling	返回上一个兄弟标签元素

有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。

操作元素

1、动态创建内容时所用的W3C DOM属性和方法

属性/方法	描述
document.createElement_x(tagName)	文档对象上的createElement_x方法可以创建由tagName指定的元素。如果以串div作为方法参数，就会生成一个div元素
document.createTextNode(text)	文档对象的createTextNode方法会创建一个包含静态文本的节点
<element>.appendChild(childNode)	appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。
<element>.setAttribute(name, value)	这些方法分别获得和设置元素中name属性的值
<element>.insertBefore(newNode, targetNode)	将节点newNode作为当前元素的子节点插到targetNode元素前面
<element>.removeAttribute(name)	这个方法从元素中删除属性name
<element>.removeChild(childNode)	这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode, oldNode)	这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes()	这个方法返回一个布尔值，指示元素是否有子元素

2、标签内容

innerText  获取标签文本内容
innerHTML  获取HTML内容
value   获取值，即form提交表单的值

即实例如下：

<div class="zhang">1111</div>
<div class="yan">2222</div>
<input class="lin" type="text" value="张岩林">
<script>
 document.getElementsByClassName("zhang").innertext = 123; // 获取类名为zhang的标签并把内容改为123
 document.getElementsByClassName("yan").innerHTML = 456; //获取类名为yan的标签并把内容改为456
 document.getElementsByClassName("lin").value = "张岩林很帅"; //获取类名为lin的标签并把内容改为张岩林很帅
</script>

3、属性

attributes     // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)    // 获取指定标签属性

通过自定义属性可以做一个全选，反选，取消选择的案例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div>
 <input type="button" value="全选" onclick="Checkall();">
 <input type="button" value="取消" onclick="Cancleall();">
 <input type="button" value="反选" onclick="recvall();">
</div>
<div id = "i1">
 <ul>
 <li><input type="checkbox" value="1" class="c1">篮球</li>
 <li><input type="checkbox" value="2" class="c1">足球</li>
 <li><input type="checkbox" value="3" class="c1">排球</li>
 </ul>
</div>
<script>
 function Checkall() {
 var b = document.getElementsByClassName("c1");
 for (var i = 0 ;i < b.length;i++){
  var check = b[i];
  check.checked = true
 }
 }
 function Cancleall() {
 var b = document.getElementsByClassName("c1");
 for (var i = 0 ;i < b.length;i++){
  var check = b[i];
  check.checked = false
 }
 }
 function recvall() {
 var b = document.getElementsByClassName("c1");
 for (var i = 0 ;i < b.length;i++){
  var check = b[i];
  if (check.checked){
  check.checked = false
  }else {
  check.checked = true
  }
 }
 }


</script>

</body>
</html>
全选、反选、取消案例

注：onclick是属于点击事件，后面会提到

4、class操作

className   // 获取所有类名
classList.remove(cls) // 删除指定类
classList.add(cls)  // 添加类

这个东西的用处很大，比如京东里面，当我们鼠标放到全部商品的时候，下面就出现好多商品，其商品是属于隐藏的，触发事件以后他才显示出来，其中间的操作就是定义了一个css隐藏属性，鼠标放上去后，移除CSS隐藏属性；鼠标移走又把隐藏属性给添加上去。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>隐藏</title>
 <style>
 .hide{
  display: none;
 }
 </style>
</head>
<body>

<span onmouseover="mouOver();" onmouseout="mouOut();">放这上面有东西出来，不放东西又消失</span>
<div class="hide" id = "zhangyanlin" style="font-size: 60px">张岩林好帅</div>
<script>
 function mouOver() {
 document.getElementById("zhangyanlin").classList.remove("hide");
 }
 function mouOut() {
 document.getElementById("zhangyanlin").classList.add("hide");
 }
</script>
</body>
</html>
来个案例醒醒脑

5、标签操作

我们可以通过dom创建标签，添加到指定位置，下面给大家举两种方法来操作标签

// 方式一
var zhang = "<input type='text' />";
xxx.insertAdjacentHTML("beforeEnd",zhang);
xxx.insertAdjacentElement('afterBegin',document.createElement('a'))
 
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
 
// 方式二
var tag = document.createElement('div')
xxx.appendChild(tag)  //往后追加一个div元素
xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根据索引

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <div>
 <div>
  <input type="text" />
  <input type="button" value="添加" onclick="AddElement(this);" />
 </div>
 <div style="position: relative;">
  <ul id="commentList">
  <li>alex</li>
  <li>eric</li>
  </ul>
 </div>
 </div>
 <script>
 function AddElement(ths) {
  // 获取输入的值
  var val = ths.previousElementSibling.value;
  ths.previousElementSibling.value = "";
  var commentList = document.getElementById('commentList');
  //第一种形式，字符串方式
  //var str = "<li>" + val + "</li>";
  // 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
  // beforeEnd内部最后
  // beforeBegin 外部上边
  //afterBegin 内部贴身
  //afterEnd 外部贴墙
  //commentList.insertAdjacentHTML("beforeEnd",str);
  //第二种方式，元素的方式
  var tag = document.createElement('li');
  tag.innerText = val;
  var temp = document.createElement('a');
  temp.innerText = '百度';
  temp.href = "http://etiantian.org";
  tag.appendChild(temp);
  // commentList.appendChild(tag);
  commentList.insertBefore(tag,commentList.children[1]);
 }
 </script>
</body>
</html>
添加标签操作案例

6、样式操作

<body>
<div id = i1>张岩林很帅</div>
<script>
var obj = document.getElementById('i1');
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
</script>
</body>

效果如下：

JavaScript DOM 对象深入了解 - 文章图片

来个案例吧，光看知识点多没劲，我们经常会看到输入框里面有那种颜色比较暗的字体，提示你让你输入东西，当你点进去的时候他就消失了，很神奇的操作，他就是通过dom来实现的，废话不多说直接撸码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .bb{
  color: #9a9a9a;
 }
 .aa{
  color: black;
 }
 </style>
</head>
<body>
 <input class="bb" value="请输入内容" onfocus="inpAtu(this);" onblur="onBtu(this);">
 <script>
 function inpAtu(ths) {
  ths.className = "aa";
  var text = ths.value;
  if (text == "请输入内容"){
  ths.value = "";
  }
 }
 function onBtu(ths) {
  var text = ths.value;
  if (text == "请输入内容" || text.trim().length == 0){
  ths.className = "bb";
  ths.value = "请输入内容";
  }
 }
 </script>
</body>
</html>
input输入框提示

7、位置操作

总文档高度
document.documentElement.offsetHeight
 
当前文档占屏幕高度
document.documentElement.clientHeight
 
自身高度
tag.offsetHeight
 
距离上级定位高度
tag.offsetTop
 
父定位标签
tag.offsetParent
 
滚动高度
tag.scrollTop

看到这些大家有没有想到网页右下角有个返回顶部，一点就返回到上面了，对没错就是计算这些高度；还有当你鼠标往下拉的时候，左边菜单栏相对应的样式都会变。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<style>

 body{
 margin: 0px;
 }
 img {
 border: 0;
 }
 ul{
 padding: 0;
 margin: 0;
 list-style: none;
 }
 h1{
 padding: 0;
 margin: 0;
 }
 .clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }

 .wrap{
 width: 980px;
 margin: 0 auto;
 }

 .pg-header{
 background-color: #303a40;
 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 box-shadow: 0 2px 5px rgba(0,0,0,.2);
 }
 .pg-header .logo{
 float: left;
 padding:5px 10px 5px 0px;
 }
 .pg-header .logo img{
 vertical-align: middle;
 width: 110px;
 height: 40px;

 }
 .pg-header .nav{
 line-height: 50px;
 }
 .pg-header .nav ul li{
 float: left;
 }
 .pg-header .nav ul li a{
 display: block;
 color: #ccc;
 padding: 0 20px;
 text-decoration: none;
 font-size: 14px;
 }
 .pg-header .nav ul li a:hover{
 color: #fff;
 background-color: #425a66;
 }
 .pg-body{

 }
 .pg-body .catalog{
 position: absolute;
 top:60px;
 width: 200px;
 background-color: #fafafa;
 bottom: 0px;
 }
 .pg-body .catalog.fixed{
 position: fixed;
 top:10px;
 }

 .pg-body .catalog .catalog-item.active{
 color: #fff;
 background-color: #425a66;
 }

 .pg-body .content{
 position: absolute;
 top:60px;
 width: 700px;
 margin-left: 210px;
 background-color: #fafafa;
 overflow: auto;
 }
 .pg-body .content .section{
 height: 500px;
 border: 1px solid red;
 }
</style>
<body onscroll="ScrollEvent();">
<div class="pg-header">
 <div class="wrap clearfix">
 <div class="logo">
  <a href="#">
  <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
  </a>
 </div>
 <div class="nav">
  <ul>
  <li>
   <a href="#">首页</a>
  </li>
  <li>
   <a href="#">功能一</a>
  </li>
  <li>
   <a href="#">功能二</a>
  </li>
  </ul>
 </div>

 </div>
</div>
<div class="pg-body">
 <div class="wrap">
 <div class="catalog" id="catalog">
  <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
  <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
  <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
 </div>
 <div class="content" id="content">
  <div menu="function1" class="section">
  <h1>第一章</h1>
  </div>
  <div menu="function2" class="section">
  <h1>第二章</h1>
  </div>
  <div menu="function3" class="section">
  <h1>第三章</h1>
  </div>
 </div>
 </div>

</div>
 <script>
 function ScrollEvent(){
  var bodyScrollTop = document.body.scrollTop;
  if(bodyScrollTop>50){
  document.getElementsByClassName('catalog')[0].classList.add('fixed');
  }else{
  document.getElementsByClassName('catalog')[0].classList.remove('fixed');
  }

  var content = document.getElementById('content');
  var sections = content.children;
  for(var i=0;i<sections.length;i++){
  var current_section = sections[i];

  // 当前标签距离顶部绝对高度
  var scOffTop = current_section.offsetTop + 60;

  // 当前标签距离顶部，相对高度
  var offTop = scOffTop - bodyScrollTop;

  // 当前标签高度
  var height = current_section.scrollHeight;

  if(offTop<0 && -offTop < height){
   // 当前标签添加active
   // 其他移除 active
   var menus = document.getElementById('catalog').children;
   var current_menu = menus[i];
   current_menu.classList.add('active');
   for(var j=0;j<menus.length;j++){
   if(menus[j] == current_menu){

   }else{
    menus[j].classList.remove('active');
   }
   }
   break;
  }

  }


 }
 </script>
</body>
</html>
滚动菜单

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 .pg-top{
  position: fixed;
  background-color: #0095bb;
  height: 40px;
  width: 40px;
  bottom: 50px;
  right: 40px;
  color: whitesmoke;
 }
 .hide{
  display: none;
 }
 </style>
</head>
<body onscroll="Func();">
 <div style="height: 3000px;" id = "i1">
 <h1>张岩林</h1>
 </div>
 <div class="pg-top hide" id = "i2">
 <a href="javascript:void(0);" onclick="GoTop();">返回顶部</a>
 </div>
<script>
 function Func() {
 var scrollTop = document.body.scrollTop;
 var i1 = document.getElementById("i2");
 if (scrollTop>20){
  i1.classList.remove("hide")
 }else {
  i1.classList.add("hide")
 }
 }
 function GoTop() {
 document.body.scrollTop = 0;
 }
</script>
</body>
</html>
返回顶部

8、其他操作

console.log

输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器

给说下定时器吧，定时器比较有用，比如当我们删除一个邮件的时候，会发现弹出一段对话，邮件已删除，这个是单次定时器，多次定时器在自己特定需求的时候，可以用到

// 多次定时器案例
<input type="button" value="Interval" onclick="Interval();">
<input type="button" value="StopInterval" onclick="StopInterval();">
 <script>
 function Interval() {
  s1 = setInterval(function () {
  console.log(123) //持续

输出123 },500); s1 = setInterval(function () { console.log(123) },500); } function StopInterval() { clearInterval(s1); //清除一个多次定时器 } </script>

单次定时器

<div>
 <input type="button" value="删除" onclick="Delete();">
 <input type="button" value="保留当前状态" onclick="UnDelete();">
 <div id = "status"></div>
 </div>
 <script>
 function Delete() {
  document.getElementById("status").innerText = "已删除";
  t1 = setTimeout(Clearstatus,1500);
 }
 function Clearstatus() {
  document.getElementById("status").innerText = "";
 }
 function UnDelete() {
  clearTimeout(t1); //清除完定时器，他会一直显示
 }
 </script>

事件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>

 // 普通事件
 <button id = "btn1" onclick="func();">按钮</button>
 <script>
 var btn = document.getElementById("btn1");
 function func() {
  alert("普通时间处理")
 }
 </script>
 
 
 
 
 
 // 0级处理事件
 <button id = "btn2">0级处理按钮</button>
 <script>
 var btn = document.getElementById("btn2");
 btn.onclick = function () {
  alert("0级处理按钮")
 };
// btn.onclick = null; // 清除事件处理, 多个事件会被覆盖掉，只剩下最后一个事件
 </script>

 
 
 
 // 2级处理事件
 <button id = "btn3">2级处理按钮</button>
 <script>
 var btn = document.getElementById("btn3").addEventListener("click",function () {
  alert("二级处理事件1")
 });
 var btn1= document.getElementById("btn3").addEventListener("click",function () {
  alert("二级处理事件2")
 });
 //不会被覆盖
 </script>

 <button id = "btn4">完整兼容按钮</button>
 <script>
 var btn = document.getElementById("btn4");
 if (btn.addEventListener){
  btn.addEventListener("click",demo);
 }else if(btn.attachEvent){
  btn.attachEvent("onclick",demo);
 }else {
  btn.onclick = demo;
 }
 function demo() {
  alert("整合兼容事件处理")
 }
 </script>
</body>
</html>

事件列表：

属性	此事件什么时候发生(什么时候被触发)
onabort	图象的加载被中断
onblur	元素失去焦点
onchange	区域的内容被修改
onclick	当用户点击某个对象时调用的事件句柄（比点击input标签时执行上面的代码例子）
ondblclick	当用户双击某个对象时调用的事件句柄
onerror	在加载文档或图像时发生错误
onfocus	元素获得焦点
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘被松开
onload	一张页面或一副图片完成加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标移动过来后
onmouseout	鼠标从某个元素移开
onmouseover	鼠标移动到某个元素之上
onmouseup	鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被重新调整大小
onselect	文本被选中
onsubmit	确认按钮被点击
onunload	用户退出页面

注：一个标签可以绑定多个事件，this标签当前正在操作的标签，event封装了当前事件的内容。

来几个案例吧，不然看完了感觉跟没看一个样

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 ul{
  list-style: none;
  padding: 0;
  margin: 0;
 }
 ul li{
  float: left;
  background-color: #038CAE;
  color: white;
  padding: 15px 20px;
 }
 .clearfix:after{
  display: block;
  content: '.';
  height: 0;
  visibility: hidden;
  clear: both;
 }
 .hide{
  display: none;
 }
 .tab-menu{
  border: 1px solid #dddddd;
 }
 .tab-menu .title{
  background-color: #dddddd;

 }
 .tab-menu .title .active{
  background-color: white;
  color: black;
  border-top: 2px solid red;
 }
 .tab-menu .content{
  border: 1px solid #dddddd;
  min-height: 150px;
 }
 </style>
</head>
<body>
 <div style="width: 960px;margin: 0;padding: 0">
 <div class="tab-menu">
  <div class="title clearfix">
  <ul>
   <li target = "h1" class="active" onclick="Show(this);">价格趋势</li>
   <li target = "h2" onclick="Show(this);">市场分布</li>
   <li target = "h3" onclick="Show(this);">其他</li>
  </ul>
  </div>
  <div id = "content" class="content">
  <div con = "h1">content1</div>
  <div con = "h2" class="hide">content2</div>
  <div con = "h3" class="hide">content3</div>
  </div>
 </div>
 </div>
<script>
 function Show(ths) {
 var target = ths.getAttribute('target');
 ths.className = 'active';
 var brother = ths.parentElement.children;
 for (var i=0;i<brother.length;i++){
  if (ths == brother[i]){

  }else {
  brother[i].removeAttribute("class");
  }
 }
 var content = document.getElementById("content").children;
 for (var j=0;j<content.length;j++){
  var current_content = content[j];
  var con = current_content.getAttribute("con");
  if (con == target){
  current_content.classList.remove("hide");
  }else {
  current_content.className = "hide";
  }
 }
 }
</script>
</body>
</html>
标签菜单案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 <input type="button" onclick="Func();" value="点我啊" />
 <div id="i1" >
 <div class="c1">123</div>
 <div class="c1" alex="sb">123</div>
 <div class="c1">123</div>
 <div class="c1" alex="sb">123</div>
  <div class="c1" alex="sb">123</div>
 <div class="c1">123</div>
 <div class="c1" alex="sb">123</div>
 <div class="c1">123</div>
 <!--<input type="text">-->
 <!--<input type="password">-->
 <!---->

 </div>
 <script>
 function Func() {
   // i1
  // i1所有孩子,循环每一个孩子，判断如果alex=‘sb'
  var i1 = document.getElementById('i1');
  var divs = i1.children;
  for(var i=0;i<divs.length;i++){
  var current_div = divs[i];
  var result = current_div.getAttribute('alex');
 //  console.log(result);
  if(result == "sb"){
   current_div.innerText = "456";
  }
  }
 }


 </script>
</body>
</html>
通过自定义属性改变元素值

以上这篇JavaScript DOM 对象深入了解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的JavaScript DOM 对象深入了解全部内容，希望文章能够帮你解决JavaScript DOM 对象深入了解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/351093.html

来源：【匿名】

【上一篇】JavaScript动态添加css样式和script标签【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript DOM 对象深入了解】教程文章相关的互联网学习教程文章

浏览器端-W3School-JavaScript-Browser： Navigator 对象【图】

ylbtech-浏览器端-W3School-JavaScript-Browser： Navigator 对象 1.返回顶部1、Navigator 对象Navigator 对象Navigator 对象包含有关浏览器的信息。注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。Navigator 对象集合集合描述plugins[]返回对文档中所有嵌入式对象的引用。该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的...

JavaScript之包装对象【代码】

JavaScript对象是一种复合值：它是属性和已命名值的集合。通过"."符号来引用属性值。当属性值是一个函数时，称为方法。①一段你常用但却未必明白其真正底层原理的代码：var s = "hello world!"; var word = s.substring(s.indexOf(" ")+1,s.length); 　　如前面所说，这里变量s只是一个字符串原始类型，它怎么会有属性（s.length）和方法（s.indexOf()、s.substring()）呢？没错，这正跟我们正要介绍的包装对象有关。原因是：只要...

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)【图】

一、JavaScript 正则表达式概述正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮件格式、屏蔽一篇帖子中的限制性词语等650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111052258654.jpg" title="web.png" />正则表达式...

javascript操作window对象

document.defaultView或全局变量window——获取一个window对象。1）获取窗体信息innerHeight、innerWidth——获取窗体内容区域的高度、宽度。outerHeight、outerWidth——获取窗体的高度、宽度（包括边框和菜单条等）；pageXOffset、pageYOffset——获取窗体从左上角算起水平/垂直滚动过的像素数；screen——返回一个描写叙述屏幕的Screen对象；screen.availHeight、screen.availWidth——屏幕上可供显示窗体部分的高度、宽度（排除...

JavaScript Window对象

1、Window对象的location属性引用的是Location对象，它表示该窗口中当前显示的文档的URL，并定义了方法来使窗口载入新的文档。Location对象的href属性是一个字符串，后者包含URL的完整版本。Location对象的assign()方法可以使窗口载入并显示指定的URL文档，相似的replace()方法在载入新文档之前会从浏览历史中把当前文档删除。2、Window对象的history属性引用的是该窗口的History对象。History对象是用来把窗口的浏览历史用文档和文...

原生Javascript使用Promise对象借助关键字async&await设置JS休眠时间【代码】

偶然间遇到，需要在JS中解决类似于C#中的线程休眠问题，JS有Promise对象，可以帮助我们实现这一点，网上有很多类似文章，我这里列举一个使用示例：定义休眠方法--使用Promise创建一个异步可等待的方法：//设置JS休眠一定时间后执行的动作var sleep = function (millisecond) {returnnew Promise(resolve => {setTimeout(() => {resolve()}, millisecond)})}; 使用休眠方法--使用async和await，实现休眠等待效果：//测试方法var te...

JavaScript创建对象的默认方式:组合使用构造函数模式和原型模式【代码】

由于 JavaScript中没有类，对象充当着一系列集合的模板，包含着属性和方法，而每个对象中也有一个原型对象，可以存放共享方法和属性。创建自定义类型的最常见方式，就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性 //组合使用构造函数模式(构造函数设置自己的属性)和原型模式(原型设计那些共享的方法和属性)function Person(name,age,job){this.name=name;this.age=a...

《JavaScript》——面向对象与原型【图】

谈到面向对象，我们之前学过Vb和C#，从抽象到封装再到继承和多态，面向对象的世界真的很好玩，但是JavaScript中的面向对象有些特殊，因为里面没有类，而且对象的创建方式也不同。对象的创建大约有四种方式：使用new关键字创建、使用字面量创建、使用工厂方法创建、使用构造函数创建。 1、使用new关键字var box = new Object(); //创建一个 Object 对象 box.name = 'Lee'; //创建一个 name 属性并赋值 box.age = 100; //...

通过一道笔试题浅谈javascript中的promise对象【代码】【图】

因为前几天做了一个promise对象捕获错误的面试题目，所以这几天又重温了一下promise对象。现在借这道题来分享下一些很基础的知识点。下面是一个面试题目，三个promise对象捕获错误的例子，返回结果有什么不同。 //使用throw添加错误事件var p = new Promise(function(resolve, reject) {resolve("ok");thrownew Error(‘error0‘);//setTimeout(function() { throw new Error(‘error1‘) }, 0);}); p.then(function(value){consol...

JavaScript面向对象编程（8）使用中间函数

上一讲我们提出一个很好的思路，将一个类的可复用部分全部定义在prototype中，这样子类继承的时候可以很方便地通过prototype来继承；但是也带来一个问题就是子类在重写prototype中的属性时会改变所有实例的属性，这是因为父类和子类实例都共享同一个prototype；怎么解决呢？思路就是利用一个中间函数，具体请看代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...

用javascript 面向对象制作坦克大战（二）【代码】【图】

2. 完善地图我们的地图中有空地，墙，钢，草丛，水，总部等障碍物。我们可以把这些全部设计为对象。2.1 创建障碍物对象群对象群保存各种地图上的对象，我们通过对象的属性来判断对象是否可以被穿过或被攻击。 Barrier.js: 1// 障碍物基类对象，继承自TankObject 2 Barrier = function () {3this.DefenVal = 1; // 防御力 4this.CanBeAttacked = true; // 是否可以被攻击 5}6 Barrier.prototype = new TankObject(...

JavaScript事件对象EventUtil【代码】

JS中事件对象有很多种，兼容性参差不齐，这个对象封装了大部分所需的各种方法var EventUtil={addHandler:function(element,type,handler){ //添加事件if(element.addEventListener){ element.addEventListener(type,handler,false); //使用DOM2级方法添加事件}elseif(element.attachEvent){ //使用IE方法添加事件element.attachEvent("on"+type,handler);}else{element["on"+type]=handler; //使用DO...

JavaScript 中的面向对象编程【代码】

使用JSON 来定义一个对象: <script type="text/javascript">var xiaoming = { name : ‘xiaoming‘, age : 18, say : function(){ console.log(‘my name is ‘+this.name); }}xiaoming.say();xiaoming.name = ‘li xiao ming‘;xiaoming.say();</script> 原文：http://www.cnblogs.com/likewpp/p/6935684.html

JavaScript - 函数、对象、事件、字符串（三）【代码】

JS 函数JS 函数是被设计为执行特定任务的代码块JS 函数会在某代码调用它时被执行JS 函数语法JS 函数通过 function 关键词进行定义，其后是函数名和括号()函数名可包含字母、数字、下划线、美元符号（规则与变量名相同）括号内是参数列表，多个参数之间使用逗号分隔：(参数1，参数2，参数3...)由函数执行的代码被放置在花括号中：{...}function functionName(var1,var2,var3,...){//执行代码//return ... } JS 函数调用当事件发生时...

JavaScript系列---【创建对象的三种方式】【代码】

创建对象的三种方式第一种：字面量创建对象代码：var obj={ name:‘张三‘, age:18, sex:‘男‘ } console.log(obj.name);//张三第二种：利用构造函数创建对象//构造函数 function Hero(name, type, blood) {this.name = name;this.type = type;this.blood = blood;this.attack = function (way) {console.log(way);}}//创建对象var lp = new Hero(‘廉颇‘, ‘力量型‘, ‘500血型‘);lp.attack(‘近战‘);console.log(lp); 第三...

首页 / JAVASCRIPT / JavaScript DOM 对象深入了解

JavaScript DOM 对象深入了解

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript DOM 对象深入了解】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

DOM - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程