首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript学习笔记之DOM基础 2.4

Posted in Javascript onAugust 14, 2015

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>?r光?逝，莫???蹉跎了?q月</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>?r光?逝，莫???蹉跎了?q月</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学习笔记之DOM基础 2.4

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JS字符串截取函数实例
Dec 27 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
jquery使用EasyUI Tree异步加载JSON数据（生成树）
Feb 11 Javascript
微信小程序实现留言板
Oct 31 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
vue中监听返回键问题
Aug 28 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 #Javascript
js实现表单检测及表单提示的方法
Aug 14 #Javascript
JavaScript中的this关键字使用详解
Aug 14 #Javascript
JS实现双击编辑可修改状态的方法
Aug 14 #Javascript
JavaScript变量的作用域全解析
Aug 14 #Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 #Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 #Javascript
Spring(9) PostMapping(1) yolo3(1) Xception(1) ResNet50(1) 内存泄露(1) Seaborn(1) Inception(2) tensorflow(2) 字符串(2)
You might like
浅析php工厂模式
2014/11/25 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
Eval and new funciton not the same thing
2012/12/27 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
Python2.7编程中SQLite3基本操作方法示例
2017/08/09 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python内置模块collections知识点总结
2019/12/19 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python退出循环的方法
2020/06/18 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
德国黑胶唱片、街头服装及运动鞋网上商店：HHV
2018/08/24 全球购物
会计电算化应届生自荐信
2014/02/25 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书