DOM : Document Object Model
 
D is for document : 
The DOM cant work without a document . When you create a web page and load it in a web browser, the DOM comes to life. It takes the document that you have written and turns it into 
an object .
 
O is for Objects : Just as we see before. 
 
M is for Model :
The M in DOM stands for Model, but it could just as easily stand for Map.
The DOM represents the web page thats currently loaded in the browser window. The browser 
provides a map (or a model) of the page. You can use JavaScript to read this map.
 
The most important convention used by the DOM is the representation of a document as a tree.
More specifically, the document is represented as a family tree.

However, instead of using the term family tree, its more accurate to call a document a node tree.
 
 
Nodes :
A document is a collection of nodes, with nodes as the branches and leaves on the document tree.
There are a number of defferent types of nodes. Lets take a quick look at three of them :
element nodes, text nodes, attribute nodes.
 
Element nodes :
such as <body> <p> <ul> , Elemnets are the basic building blocks of documents on the Web, and 
its the arrangement of these elements in a document that gives the document its structure.
 
Text nodes: 
if a document consisted purely of empty elements, it would have a structure, but the document 
itself wouldnt contain much content. On the web, most content is provided by text.
such as <p>Dont forget to buy this stuff</p> , "Dont forget to buy this stuff" is a text node.
In XHTML, text nodes are always enclosed within element nodes.
 
Attribute nodes:
Attributes are used to give more specific information about an element. 
<p title = "a gentle reminder"> Dont forget to buy this stuff. </p>
In DOM, title = "a gentle reminder" is an attribute node.

Because attributes are always placed within opening tags, attribute nodes are always contained 
within element nodes. Not all elements contain attribute, but all attributes are contained by elements.
 
In fact, each element in a document is an object. Using the DOM, you can "get" at all of these 
elements .
 
 
Getting Elements :
 
Three DOM methods allow you to access element nodes by ID, tag name, and class name.
 
getElementById() :
usage : document.getElementById(id) :
this method will return a specific object in the document model.
you can use the typeof to test this : eg :     
        alert( typeof document.getElementById("purchases") ) ;
 
getElementsByTagName() :
usage :   element.getElementByTagName( tag );
Even if there is only one element with the specified tag name, getElementByTagName still returns 
an array. The length of the array will be simply 1.
you can also use a wildcard(通配符) with getElementByTagName, which means you can make an 
array with every single element. eg :
        alert ( document.getElementsByTagName("*").length ) ; 
you can also combine getElementsByTagName with getElementById. eg :
        var shopping = document.getElementById("purchases") ;
        var items = shopping.getElementsByTagName("*") ;
        alert( items.length ); 
 
getElementsByClassName() 
It also behaves in the same way as getElementsByTagName by returning an array of elements with a common class name.The getElementsByClassName method is quite useful, but it’s supported by only modern browsers. To make up for this lack of support, DOM scripters have needed to roll their own getElementsByClassName function using existing DOM methods, sort of like a rite of passage.
function getElementsByClassName(node, classname) {

    if (node.getElementsByClassName) {

        // Use the existing method

        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;

    }

}
Before you may write like this : 
        var shopping = document.getElementById("purchases");
        var sales = shopping.getElementsByClassName("sale");
With this function, you can write the code like this :
         var shopping = document.getElementById("purchases");
         var sales = getElementsByClassName(shopping, "sale");
 
 
Here's a quick summary of what you've seen so far :
  1. A document is a tree of nodes.
  2. There are different types of nodes : elements, attributes, text, and so on
  3. you can go straight to a specific element node using getElementById.
  4. you can go directly to a collection of element nodes using getElementsByTagName or getElementsByClassName
  5. Every one of these nodes is an object.
 
Getting and Setting Attributes : 
getAttribute()
usage :  object.getAttribute( attribute ) ;
Unlike the other methods you've seen before, you cant use getAttribute on the document object.
It can be used on only an element node object. 
 
SetAttribute()
usage :   object.setAttribute(attribute, value);

The DOM in JavaScript的更多相关文章

  1. HTML与DOM BOM javascript

    1.什么是DOM? 简单说就是DOM规定了HTML,XML等的一些文档映射规范,使JavaScript可以根据这些规范来进行获取元素,在元素上进行各种操作,使得用户页面可以动态的变化,从而大大使页面的 ...

  2. 第61节:Java中的DOM和Javascript技术

    Java中的DOM和Javascript技术 DOM是一门技术,是文档对象模型.所需的文档只有标记型文档,如我们所学的html文档(文档中的所有标签都封装成为对象了) DOM: 为Document O ...

  3. DOM与JavaScript、jQuery之间的关系

    DOM(document object model) 其实是浏览器内元素对象的一个总称 我们用JavaScript对网页进行的所有操作都是通过DOM进行的.DOM属于浏览器,而不是JavaScript ...

  4. javascript+dom 做javascript图片库

    废话不多说 直接贴代码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. DOM（JavaScript高程笔记）

    一.节点层次 1.Node类型 if (someNode.nodeType == 1){ // 适用于所有浏览器 alert("Node is an element."); } N ...

  6. html dom与javascript的关系 -我们用JavaScript对网页（HTML）进行的所有操作都是通过DOM进行的

    一,什么是DOM (参考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什么 DOM全称为The Document Object Model,应 ...

  7. HTML(DOM)与JavaScript嵌套数组之间相互转换

    html2ja:将html目标元素解析为JavaScript数组字面量,每项的值为tagName, className, id等CSS选择器组合: showJa:将html2ja生成的数组缩进格式化显 ...

  8. DOM，javascript，Web API之间的关系——onclick 引起的思考与调研

    平时习惯了用js操作dom树来与html页面进行交互,基本都是通过web API接口实现的,最近看闭包和原生js的知识点比较多,昨天无意中看到了onclick中的this指向问题,遂用native j ...

  9. Html 内嵌 选择器属性 Dom操作 JavaScript 事件

    HTML标签: 一.通用标签(一般标签) 1.格式控制标签 <font color="#6699aa" face="楷体" size="24&q ...

随机推荐

  1. iShow UI for React 最佳实践

    React 与 AJAX React只负责处理View这一层,它本身不涉及网络请求/AJAX,所以这里我们需求考虑两个问题: 第一,用什么技术从服务端获取数据: 第二,获取到的数据应该放在react组 ...

  2. 内容显示分页数字分页 aspx

    此处是aspx里面分页显示,数据层和业务层是由动软生成 当然,我们也可以可以利用listView实现分页ListView(高效分页) public partial class NewList : Sy ...

  3. idea 清屏(控制台)快捷键

    eclipse清屏快捷键为鼠标右键+R 而在idea中默认并没有清屏console的快捷键 所以需要我们自行设置: 1,ctrl+alt+s打开settings 2,找到keymap 3,搜索 cle ...

  4. <Android 基础（四）> RecyclerView

    介绍 RecyclerView是ListView的豪华增强版.它主要包含以下几处新的特性,如ViewHolder,ItemDecorator,LayoutManager,SmothScroller以及 ...

  5. Eucalyptus4.0 管理页面介绍

    桉树配置好之后,我们可以通过web方式登陆桉树管理页面,实现对实例的启动,新建.删除,以及相关的配置操作.这里我们使用的是内网地址:http://192.168.20.60:8888/, 用户名密码默 ...

  6. 使用腾讯IP分享计划网站中的纯JS省市区三级联动

    JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...

  7. 《Python高效开发实战》实战演练——开发Django站点1

    6.2 实战演练:开发Django站点 用Django开发网站需要遵循Django的一套开发流程.本节通过建立一个消息录入页面演示Django的开发流程及相关技术. 6.12.1  建立项目 在进行D ...

  8. STL容器 成员函数 时间复杂度表

    Sequence containers Associative containers   Headers <vector> <deque> <list> <s ...

  9. linux 命令——17 whereis(转）

    whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和 find相比,whereis查找的速度 ...

  10. Atom打造轻量化C/C++ IDE

    写在前面 近期沉迷Atom的颜值无法自拔,在github的光环下,Atom凭借自身良好的素质,获得了大量开发者的青睐.随之而来的就是丰富的插件库,在插件帮助下,它对各种编程语言都有相当好的支持.对与一 ...