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，行内式
 <div id="box" style="width: 100px; height: 100px; "></div>

 <input type="button" value="点击切换颜色" onclick="toggle();"/>

 <script>

      var box = document.getElementById("box");

      function toggle() {

          box.style.backgroundColor = "#f00";

      }

 </script>
 
     b，内嵌式--on
 <div id="box" style="width: 100px; height: 100px; " id="box"></div>

 <input type="button" value="点击切换颜色" id="btn"/>

 <script>

     var box = document.getElementById("box");

     var btn = document.getElementById("btn");

     btn.onclick = function () {

         box.style.backgroundColor = "#f00";

     }

 </script>
 
     c，内嵌式--addEventListener
     addEventListener(type, listener, useCapture);
//type，事件名称（注意不带on）
//listener，时间的监听者--事件处理函数
//useCapture，是否捕获，true（捕获） false（冒泡）
 <input type="button" value="button" id="btn"/>

 <script>

      var btn = document.getElementById("btn");

      btn.addEventListener("click", function () {

          alert("我说：哈哈哈");

      },false);

      btn.addEventListener("click", function () {

           alert("她说：23333");

      }, false);

      //两次事件都会执行，这是区别于on方式的

 </script>
还有一个是attachEvent，区别主要分为事件名称的区别和this的区别，放在代码块里解释

//事件名称的区别

     // 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标签显示（转义）
 
          为此封装兼容性函数，进行能力检测
 //获得页面标签之间文本内容的兼容性写法

 function getInnerText(obj) {

             if (obj.innerText) {

                         retrun obj.innerText;

             } else {

                         return obj.textContent;

             }

 }

 //设置页面标签之间的文本内容的兼容性写法

 function setInnerText(obj, value) {

             if(obj.innerText) {

                         obj.innerText = value;

             } else {

                         obj.textContent = value;

             }

 }
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 改变元素的透明度
 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div {

             width: 200px;

             height: 200px;

             background-color: rebeccapurple;

             position: absolute;

         }

     </style>

 </head>

 <body>

 <input type="button" id="btn" value="button">

 <div id="box"></div>

 <script>

     var btn = document.getElementById("btn");

     var box = document.getElementById("box");

     btn.onclick = function () {

         box.style.backgroundColor = "blue"; //5.3

         box.style.width = " 400px"; //5.4

         box.style.top = "200px";    //5.5

         box.style.zIndex = "1"; //5.6

         box.style.opacity = .5; //5.7

     };

 </script>

 </body>
6.自定义属性
     getAttribute     获取自定义属性
     setAttribute     设置自定义属性
     removeAttribute     移除自定义属性
     下面是一段tab切换的css样式和js代码

 <style>

         * {

             margin: 0;

             padding: 0;

         }

         ul {

             list-style: none;

         }

         .box {

             width: 400px;

             height: 300px;

             border: 1px solid #ccc;

             margin: 100px auto;

         }

         .hd {

             height: 45px;

         }

         .hd span {

             display: inline-block; /*将行内元素转换成行内块元素，宽高才起作用*/

             width: 90px;

             background-color: pink;

             line-height: 45px;

             text-align: center;

             cursor: pointer;

         }

         .hd span.current {

             background-color: purple; /*紫色*/

         }

         .bd li {

             height: 255px;

             background-color: purple;

             display: none;  /*设置隐藏*/

         }

         .bd li.current {

             display: block;

         }

     </style>

 </head>

 <body>

 <div class="box" id="box">

     <div class="hd">

         <span class="current">体育</span>

         <span>娱乐</span>

         <span>新闻</span>

         <span>综合</span>

     </div>

     <div class="bd">

         <ul>

             <li class="current">我是体育模块</li>

             <li>我的娱乐模块</li>

             <li>我是新闻模块</li>

             <li>我是综合模块</li>

         </ul>

     </div>

 </div>

 <script>

     var box = document.getElementById("box");

     var spans = box.getElementsByTagName("span");

     var lis = box.getElementsByTagName("li");

     for (var i = 0; i < spans.length; i++) {

         spans[i].setAttribute("index", i);//设置自定义属性index

         spans[i].onclick = function () {

             for (var j = 0; j < spans.length; j++) {

                 spans[j].removeAttribute("class");

                 lis[j].removeAttribute("class");

             }

             this.setAttribute("class", "current");

             //var index = this.getAttribute("index");//设置一个变量来获得自定义属性

             //lis[index].setAttribute("class", "current");

             lis[this.getAttribute("index")].setAttribute("class", "current");

         };

     }

 </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.动态创建元素
 
方法一、documenet.write();
写在函数里的话，会冲掉之前的元素，所以一般不用
  
方法二、innerHTML
innerHTML比较方便，但要注意尽量不要频繁的拼接字符串
字符串具有不可变性，会重复开辟内存空间，一定要注意优化
可以考虑用数组代替
  
方法三、document.creatElement()
如：appendChild()
       removeChild()
       insertBefore()
       replaceChild()
  

javascript中DOM部分基础知识总结的更多相关文章

  1. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  2. javascript中BOM部分基础知识总结

    一.什么是BOM      BOM(Browser Object Document)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管 ...

  3. JavaScript中BOM的基础知识总结

    一.什么是BOM      BOM(Browser Object Model)即浏览器对象模型.      BOM提供了独立于内容 而与浏览器窗口进行交互的对象:      由于BOM主要用于管理窗口 ...

  4. JavaScript中数组的基础知识和相关方法

      数组基础 数组是大多数语言里面最常见的一种数据结构,它是一个有序的值列表. 创建数组 1.创建字面量数组 let arr=[]; 2.创建构造函数数组 let arr=new Array(); 注 ...

  5. ASP.NET中的C#基础知识

    ASP.NET中的C#基础知识 说明:asp.net作为一种开发框架现在已经广为应用,其开发的基础除了前端的html.css.JavaScript等后端最重要的语言支持还是C#,下面将主要用到的基础知 ...

  6. MySQL中索引的基础知识

    本文是关于MySQL中索引的基础知识.主要讲了索引的意义与原理.创建与删除的操作.并未涉及到索引的数据结构.高性能策略等. 一.概述 1.索引的意义:用于提高数据库检索数据的效率,提高数据库性能. 数 ...

  7. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  8. javascript中正则表达式的基础语法

    × 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...

  9. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

随机推荐

  1. 修改input框默认黄色背景

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 ...

  2. java轻量级IOC框架Guice

    Google-Guice入门介绍(较为清晰的说明了流程):http://blog.csdn.net/derekjiang/article/details/7231490 使用Guice,需要添加第三方 ...

  3. QUOTED_IDENTIFIER 选项对 index 的影响

    在修改或创建Index时,有时会收到一些Error Message,指明Set options设置错误,最常见的选项是:SET QUOTED_IDENTIFIER 选项 当创建或修改的index包含c ...

  4. SharePoint Server 2013 让上传文件更精彩

    新版的SharePoint 2013 提供了多种上传与新建文件的方式,对于与系统集成紧密的IE来上传文档更加方便 使用IE开启SharePoint地址 Figure 1打开文档库,在"新颖快 ...

  5. Oracle并行添加主键的方法

    环境:Oracle 11.2.0.3 需求:生产一张表由于前期设计不当,没有主键.现需要添加主键,数据量很大,想并行建立.   1.直接添加,提示ora-3001:未实施的功能;只能单线程建立主键 S ...

  6. spring整合hibernate的详细步骤

    Spring整合hibernate需要整合些什么? 由IOC容器来生成hibernate的sessionFactory. 让hibernate使用spring的声明式事务 整合步骤: 加入hibern ...

  7. linker command failed with exit code

    转载 : http://blog.csdn.net/chengwuli125/article/details/25051741

  8. WebLogic12.1.1中跨域问题的探讨以及几种常见中间件中跨域问题的解决方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.问题描述 扬州现场中最开始安装了中间件WebLogic12.1.1 ...

  9. .net基本数据类型操作

    代码编写的过程中,较多的会涉及到基本数据类型的使用和定义,在项目中,对于类型的判定和类型间的相互转换,有时也较为的麻烦,先提供几种基本数据类型的判断方法: 1.判断对象是否为Int32类型的数字: / ...

  10. SDN/NFV若干问题

    1.首先谈一谈网络技术和组网技术的关系 网络可分为两层:业务网.承载网.业务网主要是组织业务系统,而承载网主要是用来传输信息流:包括传送网(点到点数据专线).数据网(端到端连接).内容分发网(点到多点 ...