JavaScript DOM 基础：从平稳退化到节点操作详解

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。此举既避免无效操作，也起到性能优化作用。

window.onload 事件绑定技巧

二、绑定 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>

DOM 节点获取与指针操作

javascript学习笔记 Dom知识点总结

JavaScript 的 window 对象对应浏览器窗口，其属性和方法统称为 BOM（浏览器对象模型），例如 window.open()、window.location 等。

JavaScript 的 document 对象指文档对象模型，主要用于处理网页内容。DOM（Document Object Model）即文档对象模型，是针对 HTML 和 XML 文档的 API。D 代表 document（文档），O 代表 object（对象），M 代表 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;

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

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

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

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

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

DOM 节点增删改查与内容样式操作

节点的操作

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 方法，但可通过以下方法模拟实现；

/*
 * 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;
 }
}

元素位置、尺寸及常用 Document 属性

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 用于识别文档模式。