javascript中DOM部分基础知识总结

时间  2021-01-16
标签 css html node 数组 浏览器 app 函数 性能 学习 优化 栏目 JavaScript 繁體版
原文   原文链接
1.DOM介绍
      1.1 DOM概念
     文档对象模型（Document Object Model），它定义了访问和处理HTML文档的标准方法。如今咱们主要接触到的是HTML DOM。
HTML文档中的每一个成分都是一个节点。HTML文档中的全部节点组成了一个文档树（节点树）。HTML文档中的每一个元素、属性、文本等都表明着树中的一个节点。树起始于文档节点，并由此继续延伸枝条，直处处于这棵树最低级别的全部文本节点为止。学习DOM，就是学习一些操做页面元素的API（方法）。下图表示一个文档树。
 

 

      1.2 DOM的组成
     DOM是由节点组成的。节点又分为标签节点、属性节点、文本节点。
 
      1.3 DOM的用途
     经过JavaScript，咱们能够重构整个HTML页面文档。能够添加、移除、改变或重排页面上的项目。要改变页面的某个东西（即动态改变），JavaScript就须要得到对HTML文档中全部元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是经过文档对象模型（DOM）来得到的。
 
2.获取页面元素的三种方式
document.getELementById(idStr);
document.getElementsByTagName(tagStr);
document.getElementsByClassName(classStr);     //不经常使用
 
3.事件
      3.1 什么是事件
      事件就是文档或浏览器中发生的某些特定的 交互瞬间。可分为 触发（发生的什么事，作的什么操做）和 响应（获得或达到的什么效果）两个阶段。
 
      3.2 事件的三要素
     a，事件源     //要注册事件的对象
     b，事件名称     //要注册哪一种事件，click、mouseover等等
     c，事件处理程序     // 要执行的函数
 
      3.3 注册事件的三种方式
     a，行内式
复制代码 
1 <div id="box" style="width: 100px; height: 100px; "></div> 2 <input type="button" value="点击切换颜色" onclick="toggle();"/> 3 <script> 4 var box = document.getElementById("box"); 5 function toggle() { 6  box.style.backgroundColor = "#f00"; 7  } 8 </script>
复制代码

 

 
     b，内嵌式--on
复制代码 
1 <div id="box" style="width: 100px; height: 100px; " id="box"></div> 2 <input type="button" value="点击切换颜色" id="btn"/> 3 <script> 4 var box = document.getElementById("box"); 5 var btn = document.getElementById("btn"); 6  btn.onclick = function () { 7  box.style.backgroundColor = "#f00"; 8  } 9 </script>
复制代码
 
     c，内嵌式--addEventListener
     addEventListener(type, listener, useCapture);
//type，事件名称（注意不带on）
//listener，时间的监听者--事件处理函数
//useCapture，是否捕获，true（捕获） false（冒泡）
复制代码 
 1 <input type="button" value="button" id="btn"/>  2 <script>  3 var btn = document.getElementById("btn");  4  btn.addEventListener("click", function () {  5  alert("我说：哈哈哈");  6  },false);  7  btn.addEventListener("click", function () {  8  alert("她说：23333");  9  }, false); 10 //两次事件都会执行，这是区别于on方式的 11 </script>
复制代码

 

还有一个是attachEvent，区别主要分为事件名称的区别和this的区别，放在代码块里解释
 
1
2
3
4
5
6
//事件名称的区别
      // addEventLisener中第一个参数type是click、load，不带on
      // attachEvent中一个参数type是onclick、onload
//this的区别
      // addEventLisener：事件处理程序会在当前对象的做用域运行，所以事件处理程序的this就是当前对象
      // attachEvent：事件处理程序是在全局做用域下运行,所以this就是window
 
 
  补充1：注册事件的性能问题
          可能会屡次调用匿名函数，占内存。不妨把函数写在事件以外
 
  补充2：移除事件的两种方式
1，如：element.onlick = null;
2，如：removeEventListener     （IE9之前detachEvent， 若是注册的时候使用的是匿名函数，则没法移除）
 
      3.4 经常使用的一些事件
     onclick, ondblclick, onchang, onfocus, onnblur, onmouseover, onmouseout, onkeyup, onkeydown, onload, onunload, onsubmit等等
 
     3.5 事件中的this
     事件中的this始终指代当前触发事件的对象
 
4.获取标签内容和设置标签内容
     第一种方式，innerText
     第二种方式，innerHTML
     二者的区别：1，二者均可以得到页面元素之间的内容
                         2，innetText只会获取文本信息，而innerHTML会将标签之间的标签获取到，并会原样输出
                         3，innerText在火狐早期版本不支持，早期火狐只支持textContent，新版本都已兼容
                         4，innerText设置带有标签内容的时候，会正常输出；innerHTML会将里面的标签渲染成HTML标签显示（转义）
 
          为此封装兼容性函数，进行能力检测
复制代码 
 1 //得到页面标签之间文本内容的兼容性写法  2 function getInnerText(obj) {  3  if (obj.innerText) {  4  retrun obj.innerText;  5  } else {  6  return obj.textContent;  7  }  8 }  9 //设置页面标签之间的文本内容的兼容性写法 10 function setInnerText(obj, value) { 11  if(obj.innerText) { 12  obj.innerText = value; 13  } else { 14  obj.textContent = value; 15  } 16 }
复制代码

 

5.动态操做页面元素的属性及修改样式
       5.1 给元素添加类名以改变样式
     5.2 用JS改变标签的单属性值
复制代码 
<input type="button" value="按钮1" id="btn" aa="本身设置的类名"> <script> var btn = document.getElementById("btn"); btn.value = "按钮2"; //设置属性，改变了原来的属性值  btn.bb = "本身设置的属性"; //其实是添加不上去的 </script>
复制代码
     
       5.3 修改元素背景色
     5.4 动态改变元素的宽高
     5.5 改变元素的位置（定位）
     5.6 改变元素的层级
     5.7 改变元素的透明度
复制代码 
 1 <head>  2 <meta charset="UTF-8">  3 <title>Title</title>  4 <style>  5  div {  6  width: 200px;  7  height: 200px;  8  background-color: rebeccapurple;  9  position: absolute; 10 } 11 </style> 12 </head> 13 <body> 14 <input type="button" id="btn" value="button"> 15 <div id="box"></div> 16 <script> 17 var btn = document.getElementById("btn"); 18 var box = document.getElementById("box"); 19  btn.onclick = function () { 20  box.style.backgroundColor = "blue"; //5.3 21  box.style.width = " 400px"; //5.4 22  box.style.top = "200px"; //5.5 23  box.style.zIndex = "1"; //5.6 24  box.style.opacity = .5; //5.7 25  }; 26 </script> 27 </body>
复制代码

 

6.自定义属性
     getAttribute     获取自定义属性
     setAttribute     设置自定义属性
     removeAttribute     移除自定义属性
     下面是一段tab切换的css样式和js代码
    
复制代码 
 1 <style>  2  * {  3  margin: 0;  4  padding: 0;  5 }  6  ul {  7  list-style: none;  8 }  9  .box { 10  width: 400px; 11  height: 300px; 12  border: 1px solid #ccc; 13  margin: 100px auto; 14 } 15  .hd { 16  height: 45px; 17 } 18  .hd span { 19  display: inline-block; /*将行内元素转换成行内块元素，宽高才起做用*/ 20  width: 90px; 21  background-color: pink; 22  line-height: 45px; 23  text-align: center; 24  cursor: pointer; 25 } 26  .hd span.current { 27  background-color: purple; /*紫色*/ 28 } 29  .bd li { 30  height: 255px; 31  background-color: purple; 32  display: none; /*设置隐藏*/ 33 } 34  .bd li.current { 35  display: block; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="box" id="box"> 41 <div class="hd"> 42 <span class="current">体育</span> 43 <span>娱乐</span> 44 <span>新闻</span> 45 <span>综合</span> 46 </div> 47 <div class="bd"> 48 <ul> 49 <li class="current">我是体育模块</li> 50 <li>个人娱乐模块</li> 51 <li>我是新闻模块</li> 52 <li>我是综合模块</li> 53 </ul> 54 </div> 55 </div> 56 <script> 57 var box = document.getElementById("box"); 58 var spans = box.getElementsByTagName("span"); 59 var lis = box.getElementsByTagName("li"); 60 for (var i = 0; i < spans.length; i++) { 61 spans[i].setAttribute("index", i);//设置自定义属性index 62 spans[i].onclick = function () { 63 for (var j = 0; j < spans.length; j++) { 64 spans[j].removeAttribute("class"); 65 lis[j].removeAttribute("class"); 66 } 67 this.setAttribute("class", "current"); 68 //var index = this.getAttribute("index");//设置一个变量来得到自定义属性 69 //lis[index].setAttribute("class", "current"); 70 lis[this.getAttribute("index")].setAttribute("class", "current"); 71 }; 72 } 73 </script>
复制代码

 

7.节点
      7.1 节点的类型
 a.标签节点
b.属性节点
c.文本节点
 
      7.2 节点的组成
节点类型nodeType
节点名称nodeName
节点值nodeValue
 
      7.3 节点的层次
          父节点--parentNode
          子节点--childNodes      标准的DOM属性，获取子标签之外，还会获取文本节点，IE8中会忽略空白节点
                    --children      不是标准的DOM属性，可是全部的浏览器都支持，只会返回元素节点
          兄弟节点--nextSibling      下一个兄弟节点，多是非元素节点，IE8中是元素节点
                       --nextElementSiblings      火狐，谷歌支持，IE8及以前的浏览器不支持
                       --previousSibling
                       --previousElementSiblings
          第一个和最后一个节点--firstChild
                                           --firstElementChild
                                           --lastChild
                                           --lastElementChild
          注：选择节点时，因为浏览器不一样，存在不少兼容性问题，咱们在选择以前须要进行能力检测。
 
      7.4 节点操做
 
克隆元素（标签）节点
cloneNode()
参数为True，深度克隆，克隆当前对象的一切子节点；为false，浅克隆，只会克隆标签，不包含文本信息
移除节点
removeChild
 
追加节点
appendChild
父节点.appendChild(子节点)
插入节点
insertBefore
 
得到属性节点
getAttributeNode
 
追加节点
appendChild
父节点.appendChild(子节点)
 
 
8.动态建立元素
 
方法1、documenet.write();
写在函数里的话，会冲掉以前的元素，因此通常不用
 
方法2、innerHTML
innerHTML比较方便，但要注意尽可能不要频繁的拼接字符串
字符串具备不可变性，会重复开辟内存空间，必定要注意优化
能够考虑用数组代替
 
方法3、document.creatElement()
如：appendChild()
       removeChild()
       insertBefore()
       replaceChild()
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程