《JavaScript DOM 编程艺术》读书笔记之DOM基础
DOM
DOM：文档对象模型；
节点
元素节点：DOM的原子是元素节点。<body>、<p>、<ul>之类的元素。元素可以包含其他的元素。没有被包含在其他元素里的唯一元素是<html>元素
文本节点：在XHTML文档里，文本节点总是被包含在元素节点的内部。
属性节点：属性节点用来对元素做出更具体的描述。例如，几乎每个元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西作出准确的描述：
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
在DOM中，title="a gentle reminder"是一个属性节点。
CSS
获取元素
getElementById, getElementsByTagName, getElementsByClassName三种可以获取元素节点的方法。
getElementsByTagName允许把一个通配符作为它的参数，而这意味着文档里的每个元素都将在这个函数所返回的数组里占有一席之地。通配符（“*”）必须在引号里，这是为了和乘法操作有所区别。
还可以把getElementById和getElementsByTagName结合起来运用。如下所示：
var shopping = document.getElementById("purchase");
var items = shopping.getElementsByTagName("*");
这样就可以得到id属性值为purchase的元素包含着多少个元素。
getElementsByClassName方法只有较新的浏览器才支持。为了弥补这一点，DOM脚本程序员需要使用已有的DOM方法来实现自己的getElementsByClassName。而多数情况下，他们的实现过程都与下面这个getElementsByClassName大致相似：
function getElementsByClassName(node, classname){
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i];
}
}
return results;
}
}
这个getElementsByClassName函数接受两个参数，第一个node表示DOM树中的搜素起点，第二个classname就是要搜索的类名了。
获取和设置属性
getAttribute是一个函数，它只有一个参数——你打算查询的属性的名字：
object.getAttribute(attribute)
setAttribute()允许我们对属性节点的值做出修改。通过setAttribute对文档作出修改后，在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是改变前的属性值，也就是说，setAttribute做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。
相关文章
这篇文章主要为大家详细介绍了原生js实现拖拽移动与缩放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了微信小程序按顺序同步执行的两种方式,本文通过实例代码给大家讲解，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
JavaScript装饰器函数(Decorator)实例详解
这篇文章主要介绍了JavaScript装饰器函数(Decorator),结合实例形式分析了JavaScript装饰器函数(Decorator)的功能、实现与使用方法,需要的朋友可以参考下2017-03-03
表单元素事件 (Form Element Events)仅在表单元素中有效。2009-07-07
先看一道JavaScript题目，据说是国内某知名互联网企业的JavaScript笔试题，如果对正则的全局匹配模式不了解的话可能会对下面的输出结果感到疑惑。2011-04-04
为了保证我们读取的信息都是最新的，我们需要禁止ajax的缓存功能,下面我就介绍一下这个方法的使用2013-11-11
这篇文章主要为大家介绍了JS前端开发模拟虚拟dom转真实dom详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主要给大家介绍了关于微信小程序自定义组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
本篇文章主要介绍了用函数式编程对JavaScript进行断舍离，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了BootStrap导航栏问题记录,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-07-07
最新评论