JavaScript学习笔记之DOM基础 2.4

更新时间：2015年08月14日 15:14:41 投稿：mrr

DOM(Document Object Model)，即“文档对象模型”。基于语义的逻辑结构，DOM将网页内的元素与内容呈现为一个清晰、易读的树状模型，下面小编把最近整理有关javascript笔记之DOM基础分享给大家，有需要的朋友可以参考下

DOM的发展，与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑，DOM才能正确地发挥其功用。如今，正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。因此，在网页前端开发中，DOM的存在，无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API，成为热门的Ajax应用中不可或缺的组成部分。

一、平稳退化

1、概念

早期，在未使用JavaScript之前，网页中的内容可以正常显示出来，用户可以通过外设（如鼠标）操控浏览到相关内容，这种浏览体验对用户而言可能并不理想。

根据这个需求，内容的提供方就有了合理化目标——那就是在不影响内容展示的前提下，使用JavaScript来改善用户体验，提高用户粘性。

在这个标目中，有个非常明显的条件，就是不能影响内容的正常展示，换言之，即使用户的浏览器不支持JavaScript，也能保证用户可以正常浏览。

2、方法

①将JavaScript与HTML分离

这是首先应该想到的，让两者分离，HTML就像回到早期未使用JavaScript之前的状态，干爽如初啊。

譬如将element.onClick之类的事件处理函数写进JavaScript中，与某函数进行绑定。

②对JavaScript中的方法进行检测

之前提到的一些方法，如getElementById之类，都需要去判定该方法是否支持。

<script>
if(! document.getElementById) return false;
</script>

通过if语句这种方式来检测是否支持该方法，如果支持，可以继续，不支持，直接返回false，这样就没必要耽误功夫了，也起到了性能优化的作用。

二、绑定onload事件

1、绑定缘由

一些函数需要在页面加载完全之后才能有效执行，我们需要将函数绑定到window.onload这个事件上。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].firstChild.nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
window.onload = tagAttribute;
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

在上面这个实例中，如果不绑定window.onload，执行函数tagAttribute将会毫无意义。

还需要注意一点，绑定的是函数，而不是这个函数的值，所以后面不带圆括号。

2、绑定方法

如果你只需要绑定一个函数，那么上面的方法完全可以轻松实现你的目的。

window.onload = myFunction;

如果是多个，也许你会去一个个的绑定，可是，这样做的结果是只有最后一个函数才会被有效执行，关于这一点其实很好理解。

我们的目的是，不管页面中加载完毕时执行多少个函数，这些函数都可以有效执行，也就是说，这些函数都被成功绑定window.onload事件。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>筱雨生 - 博客园</title>
<script>
function addOnLoadEvent(func){
  var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload
  if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数
    window.onload = func; // 将这个函数绑定到window.onload事件
  }else{
    window.onload = function(){ // 如果这个处理函数已经绑定了函数，就把这个函数追加到指令的末尾
      oldonload();
      func();
    }
}
}
//自定义函数 tagAttribute 
//功能：获取li标签中的title值
function tagAttribute(){
var ali = document.getElementsByTagName('li'); 
for(var i = 0; i < ali.length; i++){
  if(ali[i].childNodes[0].nodeType == 3){
    alert(ali[i].childNodes[0].nodeValue);
  }
}
}
addOnLoadEvent(tagAttribute); // 为tagAttribute函数绑定到window.onload事件
</script>
</head>
<body>
<h1>筱雨生</h1>
<p>時光飛逝，莫讓網絡蹉跎了歲月</p>
<div id="myBlog">
<ul>
<li title="JavaScript">JavaScript</li>
<li title="HTML">HTML</li>
<li title="CSS">CSS</li>
<li title="我的随笔">我的随笔</li>
<li></li>
</ul>
</div>
</body>
</html>

javascript学习笔记 Dom知识点总结

JavaScript的window对象对应着浏览器窗口本身，因此这个对象的属性和方法统称为BOM（浏览器对象模型），如window.open(),window.location等。

JavaScript的document对象是指文档对象模型，主要是处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API 。字母D指document（文档），字母O指object（对象），字母指Model（模型）。DOM 描绘了一个层次化的节点树。节点表示一个连接点，文档是由节点构成的集合，DOM的节点主要分为三类：元素节点、文本节点（不是文本内容）、属性节点。

获取节点的名称和类型

1.nodeName属性用来获取节点的名称，文本节点返回#text,元素节点返回标签名称（此时等价于tagName）。语法：目标节点.nodeName
2.nodeType属性用来获取节点的类型，元素节点：1，属性节点：2，文本节点：3。语法：目标节点.nodeType
3.nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法：目标节点.nodeValue

获取元素节点的方式

1. document.getElementById

通过ID查找，返回唯一元素节点

2. document.getElementsByName

通过name属性查找，返回元素节点数组

3. document.getElementsByTagName

通过标签名称查找，返回元素节点数组

以下三种方法属于HTML5 DOM，并非所有浏览器支持（如某些低版本IE就不支持），属于高级方法

4. document.getElementsByClassName

通过class属性的类名查找，返回元素节点数组

5. document.querySelector

通过selector条件获取元素节点，只返回符合条件的第一个元素节点

6. document.querySelectorAll

通过selector条件获取元素节点，返回所有符合条件的元素节点数组，多条件使用逗号分隔，表示要查找的元素必须符合所有逗号分隔的条件，如果一个元素只符合逗号分隔的条件中的一个，则不会被返回

小结： getElementById和querySelector只返回一个元素节点，而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素节点数组

节点指针

1.childNodes属性用来获取元素节点的子节点，返回节点数组。语法：父节点.childNodes;

2.children属性可以用来获取忽略了空白节点的有效节点（在某些浏览器上，空白符或换行符也是一个文本节点）。语法：父节点.children;

3.firstChild属性可以用来获取元素的第一个子节点，等价于 childNodes[0]。语法：父节点.firstChild;

3.lastChild属性可以用来获取元素的最后一个子节点，等价于 childNodes[childNodes.length-1]。语法：父节点.lastChild;

4.previousSibling属性用来获取目标节点的前一个兄弟节点。语法：目标节点.previousSibling;

5.nextSibling属性用来获取目标节点的后一个兄弟节点。语法：目标节点.nextSibling;

6.parentNode属性用来获取已知节点的父节点。语法：子节点.parentNode;

7.ownerDocument属性用来当前节点所在文档的根节点，等价于document。语法：目标节点.ownerDocument;

节点的操作

1.createElement方法用来创建元素节点。语法：document.createElement('元素标签名称');

2.createAttribute方法用来创建属性节点。语法：document.createAttribute('属性名称');

3.createTextNode方法用来创建文本节点。语法：document.createTextNode('文本内容');

4.appendChild方法用来在目标节点的子节点的末尾添加一个子节点（可以是createElement创建的元素节点，也可以是createTextNode创建的文本节点）。语法：parent.appendChild(要插入的节点);

5.insertBefore方法用来在目标元素的前面插入一个新元素节点，此时的指针在目标元素的父级上。语法：parent.insertBefore(newElement,targetElement);

6.DOM中没有insertAfter这个方法，但是可以通过以下方法来模拟insertAfter;

/*
 * newElement : 要插入的新元素
 * targetElement : 目标元素 
 */
function insertAfter(newElement,targetElement){
 var parent = targetElement.parentNode;
 if(parent.lastChild == targetElement){
 /*
  如果目标元素是parent的最后一个子元素，则把新元素追加到parent元素上，
  也就是在parent的子元素的末尾位置添加新元素 
 */
 parent.appendChild(newElement);
 }else{
 /*
  否则，就把新元素添加到目标元素和目标元素的下一个兄弟元素之间 
 */
 parent.insertBefore(newElement,targetElement.nextSibling);
 }
}

7.replaceChild方法用来替换一个元素节点，此时的指针在目标元素的父级上。语法：parent.replaceChild(replaceElement,targetElement);

8.cloneChild方法用来克隆一个元素节点，传递一个布尔参数，参数为true时表示复制当前节点及其所有子节点，参数为false时表示支付至当前节点。语法：目标元素.cloneChild(true|false);

9.removeChild方法用来删除一个指定节点。语法：removeChild(要删除的节点);

10.getAttribute方法用来获取一个属性的值。语法：目标元素.getAttribute(元素属性名称);

11.setAttribute方法用来设置一个属性的值，没有该属性则创建。语法：目标元素.setAttribute(元素属性名称,属性值);

12.removeAttribute方法用来删除一个属性节点。语法：目标元素.removeAttribute(要删除的属性名称);

DOM操作内容

1.innerHTML属性用来获取和设置HTML内容。语法：元素节点.innerHTML 或者元素节点.innerHTML = 'HTML字符串';

2.innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置（注意兼容性）。语法：元素节点.innerText 或者元素节点.innerText = 'HTML字符串';

DOM操作样式

1.style属性用来获取和设置元素的行内样式。语法：element.style;style属性只能获取和设置行内样式，对于如font-size这种样式属性，应该去掉 - 并且将 - 后面的第一个字母大写，驼峰法来获取和设置如：element.style.fontSize , element.style.backgroundColor

2.getComputedStyle全局方法用来获取计算后的样式，第一个参数是元素节点，第二个参数是类型，如:hover,:active等伪类，默认情况下传 null ,某些IE版本使用currentStyle属性来获取 box.currentStyle。语法：window.getComputedStyle(元素，类型)

3.className属性用来获取和设置元素的样式名称。语法：element.className

4.自定义的 addClass() | hasClass() | removeClass() 方法

//元素是否含有某样式
function hasClass(element,className){
 return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}
//向元素添加新样式
function addClass(element,className){
 if(hasClass(element,className) == false){
  element.className += ' '+className;
  }
 }
//移除元素的指定样式
function removeClass(element,className){
 var currentClass = element.className;
 if(hasClass(element,className)){
   currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
      //去除空格
   currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,'');
   element.className = currentClass;
 }
}

DOM操作位置和大小

1.clientWidth属性用来获取元素的实际宽度，该值受滚动条和内边距影响，外边距和border不会影响。语法：

element.clientWidth;

2.clientHeight属性用来获取元素的实际高度，该值受滚动条和内边距影响，外边距和border不会影响。语法：

element.clientHeight;

3.offsetWidth属性用来获取元素的实际宽度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：

element.offsetWidth;

4.offsetHeight属性用来获取元素的实际高度，该值受边框和内边距影响，外边距和滚动条不会影响。语法：

element.offsetHeight;

5.offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法：element.offsetTop ||

element.offsetLeft;

6.scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小，也可设置定位到该区域（比如返回顶部）。语法：

element.scrollTop || element.scrollLeft || element.scrollTop = 0;

常用到的简洁快速的document属性和方法

document.title 用来获取文档标题

document.domain 用来获取当前域名

document.URL 用来获取当前url路径

document.forms 获取表单集合

document.images 获取图片集合

document.body 获取body元素节点

document.compatMode 识别文档模式

您可能感兴趣的文章:

基于javascript实现彩票随机数生成（简单版）
这篇文章主要介绍了基于javascript实现彩票随机数生成的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-01-01
js 发布订阅模式的实例讲解
下面小编就为大家带来一篇js 发布订阅模式的实例讲解。小编觉得挺不错的，现在就想给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JavaScript中this的绑定你知道几种?
this对于一些有经验的JavaScript开发者来说是一种非常复杂的机制。并且很多开发者对于this的理解并不是很清晰，导致在面试的时候经常受挫。今天我们就来看一看这个this真的有那么难吗
2023-02-02
html+css+js实现简易版ChatGPT聊天机器人
OpenAI的一款聊天机器人模型ChatGPT爆火，本篇文章用一百行html+css+js代码给大家制作一款简易的聊天机器人。
2023-02-02
javascript Array对象使用小结
数组是一段线性分配的内存，它通过整数去计算偏移并访问其中的元素。数组是很快的数据结构，但不幸的是，Javascript并没有像这种数组一样的数据结构。
2009-12-12
JavaScript中for-in遍历方式示例介绍
for-in遍历方式的循环计数器是字符串类型，遍历对象时为对象属性/方法名，遍历数组时为数组元素下标索引，与普通的for循环不同,需要的朋友可以参考下
2014-02-02
Pixi.js实现可视化图形编辑器的方法
本文主要介绍了Pixi.js实现可视化图形编辑器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
getComputedStyle与currentStyle获取样式(style/class)
通过document.getElementById(element).style.xxx可以获取元素的样式信息但是对于通过class属性引用的外部样式表就获取不到了，感兴趣的朋友可以了解下
2013-03-03
JavaScript Class类实例讲解
ES6提供了更接近面向对象(注意:javascript本质上是基于对象的语言)语言的写法,引入了Class(类)这个概念,作为对象的模板,下面这篇文章主要给大家介绍了关于JavaScript ES6中class定义类的相关资料,需要的朋友可以参考下
2022-11-11
js实现盒子滚动动画效果
这篇文章主要为大家详细介绍了js实现盒子滚动动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08