DOM介绍

鼠标事件#

键盘事件#

框架/对象事件#

表单事件#

剪贴板事件#

打印事件#

拖动事件#

多媒体事件#

动画事件#

过渡事件#

其他事件#

获取DOM节点#

• getElementById() 通过ID获取元素节点，返回一个普通对象
  • 注意: ID其实可以不用获取而直接使用,因为ID是具有唯一性的,但是不推荐不获取就直接使用ID，因为以后会很难区分这个变量是哪里来的
• getElementsByTagName() 可以根据标签名来获取一组元素节点对象，这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，即使查询到的元素只有一个，也会封装到数组中返回
• getElementsByClassName() 方法通过类名获取元素节点(IE8及以下版本不支持),返回一个类数组对象
• getElementsByName() 方法通过name属性获取元素节点，这个方法主要是获取表单项，返回一个类数组对象
• quertSelector() 方法需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象，语法和CSS语法一样，可以多个选择器一起使用，该方法在IE8也可用
  • **注意:**使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，也只会返回第一个找到的
• quertSelectorAll() 方法用法同quertSelector()方法相同
  • **注意:**使用该方法就返回一个类数组对象，类数组对象里包含的所有符号要求的元素对象,即使符合条件的元素只有一个，也会返回类数组

获取属性节点#

1
- 读取元素的属性节点,使用 元素.属性名 或 元素[属性名]
2
- 修改元素的属性节点,使用 元素.属性名=新值 或 元素[属性名]=新值
3
  - **注意:** 读取元素的class属性时必须用className来代替class关键字

获取文本节点#

• innerHTML 属性可以获取双标签元素内部的html代码，包括子标签,这个属性对于单标签元素(如表单标签)没有意义，返回一个字符串
• InnerText 属性可以获取双标签元素内部的文本内容，它和InnerHTML属性类似，但会自动将HTML标签去除，返回一个字符串
• value属性可以获取单标签元素(如表单标签)内部的内容，同时要向单标签元素写入内容也必须使用value属性，返回一个字符串
• nodeValue 属性通过获取标签内的文本节点的内容来获取元素内部的文本内容(因为文本节点实际是一个标签的子节点，所以需要先找到文本节点，返回一个字符串

获取元素子节点#

• childNodes属性获取元素子节点，该属性会获取包括文本节点的所有子节点，返回一个类数组对象
• children 属性可以获取当前元素的所有子元素，推荐用这个属性，返回一个类数组对象，而且是动态获取
• firstChild 属性表示当前节点的第一个子节点，也包括空白文本，返回一个普通对象
• firstElementChild 属性获取第一个子元素，返回一个普通对象，但是不兼容IE8，不推荐使用
• getElementsByTagName() 方法获取当前节点下一组元素节点，返回一个类数组对象
• 注：
  • 参数值 ” * ” 返回元素的所有子元素
  • document对象调用该方法，相当于获取整个文档中的元素节点

获取父和兄弟节点#

• parentElement 属性获取当前节点的父元素(只在IE中可用)
• parentNode 属性获取当前节点的父节点,这是W3C标准的,推荐使用
• offsetParent属性获取到离当前元素最近的开启了定位(除去默认的static)的祖先元素，如果所以的祖先元素都没有开启定位，则会返回body
• previousSibling 属性获取当前节点的前一个兄弟节点
  • **注意:**可能获取空白文本，如果两个元素中间有空白就会获取空白文本节点
• previosElementSibling 属性获取前一个元素，IE8不支持
• nextSibiling 属性表示当前节点的后一个兄弟节点
• nextElementSibling 获取后一个元素，IE8不支持

获取元素节点的内容#

• innerHTML和innerText 属性
  • 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
  • 两个属性作用类似，都可以获取到标签内部的内容，
    • 不同是innerHTML会获取到html标签，而innerText会自动去除标签
  • 如果使用这两个属性来设置标签内部的内容时，没有任何区别的
• nodeValue 属性设置或返回指定节点的节点值
• 注：如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值 element.childNodes[0].nodeValue

document对象的其他的属性和方法#

• document.all 获取页面中的所有元素，相当于document.getElementsByTagName(”*”);
• document.documentElement 获取页面中html根元素
• document.body 获取页面中的body元素

创建元素节点#

• document.createElement() 方法可以根据标签名创建一个元素节点对象

  • 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回 var div=document.createElement(“div”);

• document.createTextNode() 可以根据文本内容创建一个文本节点对象

  • 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新节点返回 var divText = doucment.createTextNote(“adc”);

添加元素节点#

• 父节点.appendChild() 向父节点中添加指定的子节点
  • 要添加子节点之前必须要先有这个子节点，没有就要先创建，并且新加的子节点会自动添加到所有子节点的最后面
• 父节点.insertBefore() 将一个新的节点插入到旧节点的前边
  • 该方法由父节点调用,传入两个参数(新节点和旧节点),第一个参数必填，第二个参数可选 父节点.insertBefore(新节点, 旧节点);
  • 要添加子节点之前必须要先有这个子节点，没有就要先创建，并且如果没有传入第二个参数会自动添加到所有子节点的最后面
  • 如果子节点不是新创建而是从原有父级节点上调用的，那么在用insertBefore()方法时会先将原有父级节点上的该子节点删除

替换元素节点#

• 父节点.replaceChild() 使用一个新的节点去替换旧节点
  • 要替换子节点之前必须要先有这个新的子节点，没有就要先创建 父节点.replaceChild(新节点,旧节点)

删除元素节点#

• 父节点.removeChild()
  • 删除指定的子节点
  • 推荐方式：子节点.parentNode.removeChild(子节点)

修改元素样式#

• 通过style属性修改元素样式

  • 语法：元素.style.样式名 = 样式值 注：

  • 通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示

  • 但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效

  • 如果CSS的样式名中含有 - ，这种名称在JS中是不合法的比如background-color，需要将这种样式名修改为驼峰命名法，去掉 - ，然后将 - 后的字母大写，如background-color写作backgroundColor，border-top-width写作borderTopWidth

  • 通过JS的style属性设置和读取的都是内联样式，无法读取CSS样式表中的样式(外部样式和嵌套样式)

读取元素样式#

• 元素.currentStyle.样式名

  • 它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值，如：width返回auto

  • 注：currentStyle只有IE浏览器支持，其他的浏览器都不支持 #box1{ width: 100px; height: 100px; }

    1
      var box1 = document.getElementById("box1"); //获取box1元素
    2
      alert(box1.currentStyle.width);        //100px
    3
      alert(box1.currentStyle.backgroundColor);  //transparent

• getComputedStyle()

  • 获取元素当前的样式，这个方法是window的方法，可以直接使用，但是该方法不支持IE8及以下的浏览器

  • 需要两个参数

    • 第一个：要获取样式的元素
    • 第二个：可以传递一个伪元素，一般都传null

  • 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值，比如：没有设置width，它不会获取到auto，而是一个长度 #box1 { width: 100px; height: 200px; background-color: #bfa; }

    1
      var box1 = document.getElementById("box1");
    2
      var objBox1 = getComputedStyle(box1, null);
    3
      alert(objBox1.width);  //100px

• 注意: 通过currentStyle属性和getComputedStyle()方法读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

• 二者的兼容写法 function getStyle(obj , name){ /* 参数 要获取样式的元素 name 要获取的样式名 */ if(window.getComputedStyle){ //这里的getComputedStyle函数实际上是一个对象，如果有则返回true， 而这里使用window对象调用，是在全局作用域中寻找是否含有这个对象没有则返回false（相当于ie没有该对象）， 而如果不通过window对象调用的话，在局部作用域中调用会找不到这个对象，返回一个undefined //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj , null)[name]; } else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } //当然if的对象也可以反过来，但是如果判断obj.currentStyle有问题在于IE8以上的IE浏览器两种方法都有， 这样它就会优先使用第一个方法，但是我们推荐优先使用getComputedStyle()

  1
      //简洁写法，三目运算符
  2
      //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
  3
  
  4
    }

获取特殊样式#

• 注: 以下获取的样式都是只读的,不能够修改

• clientWidth 与 clientHeight

  • 这两个属性可以获取元素的可见宽度和高度
  • 这些属性都是不带px的，返回都是一个number类型，可以直接进行计算
  • 会获取元素宽度和高度，包括内容区和内边距

• offsetWidth 与 offsetHeight

  • 获取元素的整个宽度和高度(内容区，内边距和边框)，返回值也是number类型

• offsetParent

  • 可以用来获取当前元素的定位父元素
  • 会获取到离当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body

• offsetLeft 与 offsetTop

  • 获取当前元素相对于其定位父元素的水平偏移量和垂直偏移量
  • **注意：**偏移量的原点是父元素的左上角(left top)，和背景图片的原点相同

• window.innerWidth 与 window.innerHeight

  • 可以获取window窗口的内部宽高
  • **注意：**不包括页面的导航栏以及页面滚动条和控制台

• scrollWidth 与 scrollHeight

  • 可以获取元素整个滚动区域的宽度和高度，如果没有隐藏的部分则等于clientWidth和clientHeight

• scrollLeft 与 scrollTop

  • 可以获取水平和垂直滚动条滚动的距离 当满足 scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了（实际高度 - 滚动高度 == 可视高度） 当满足 scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底

• 实例

  1
                    input[0].onclick = function () {  //勾选checkbox时
  2
                        if (input[0].checked == true) {
  3
                            input[1].disabled = false;
  4
                        }
  5
                        else{
  6
                            input[1].disabled = true;
  7
                        }
  8
                    }
  9
                }
  10
            }
  11
        }
  12
      </script>
  13
  
  14
        <style>
  15
            #info{
  16
                width: 200px;
  17
                height: 300px;
  18
                background-color: #bbffaa;
  19
                overflow: auto;
  20
            }
  21
        </style>
  22
    </head>
  23
    <body>
  24
        <div id="box">
  25
            <p id="info">亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
  26
          </p>
  27
                <input type="checkbox" name="c" id="check" disabled="disabled">我已阅读
  28
                <input type="button" value="注册" disabled="disabled" >
  29
        </div>
  30
    </body>
  31
    </html>

  展开收起