DOM(Document Object Model),即 "文档对象模型"。基于语义的逻辑结构,DOM 将网页内的元素与内容呈现为一个清晰、易读的树状模型,下面小编把最近整理有关 javascript 笔记之 DOM 基础分享给大家,有需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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 事件。
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. 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 识别文档模式
来源: http://www.phperz.com/article/17/0223/269923.html