DOM 文档对象模型
DOM (document object model) 文档对象模型，它定义了操作文档对象的接口。
DOM 把一份html文档表示为一棵家谱树，使用parent(父), child(子), sibling(兄弟)等记号 来表明家庭成员之间的关系。 
一、节点 
节点（node) 一词来自于网络理论，这代表着网络中一个个的连接点，网络是由节点构成的。
对于html文档也是一样，文档是由节点构成的集合。
1.元素节点
元素节点如 <body> <p> <div> 之类的元素，这些元素在文档中的布局形成了文档的结构。
2.文本节点
文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。
3.属性节点
元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在 元素节点当中。

二、获取文档对象
1. querySelector() HTML5新加入的方法，通过传入合法的CSS选择器，即可获取符合条件的第一个元素

例：document.querySelector(“#test”); //返回id为test的首个div

2. querySelectorAll() HTML5新加入的方法，通过传入合法的CSS选择器，即可获取所有符合条件的元素，返回对象数组

例：document.querySelectorAll(‘div.foo’)；//返回所有带foo类样式的div元素对象

要注意：使用这上面两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover’)不会得到 期结果

3.getElementById()

说明：这个方法返回一个与给定id属性值的元素节点相对应的对象。

document.getElementById(‘box’);

4.getElementsByTagName()

说明：这个方法返回一个对象数组。每个对象分别对应着文档里给定标签的一个元素。

document.getElementsByTagName(‘li’);

5.getElementsByName() 

说明：通过 name 获取一个对象数组三、间接引用节点

三、间接引用节点
1.引用子节点
每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点
的集合。这些子节点按

照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节
点。

document.childNodes [0].childNodes[0]    //引用<head>节点

document.childNodes[0].childNodes[1]    //引用<body>节点

element.firstChild; //第一 个子结点

element.lastChild; //最后一个子结点

element.parentNode; //引用父节点

element.nextSibling; //引用下一个兄弟节点

element.previousSibling;    //引用上一个兄弟节点

四、获取节点信息

1.nodeName 获取节点名称

语法：Node.nodeName;
不同的类型的节点，nodeName的返回值有所差异：

元素节点：返回标记名称;
属性节点：返回属性名称;

文本节点：返回文本 #text

2.nodeType 获取节点类型

语法：Node.nodeType;

元素节点：返回 1

属性节点：返回 2
文本节点：返回 3

3.nodeValue 获取节点的值

语法： Node.nodeValue;

元素节点：返回null

属性节点：返回节点值

文本节点：返回文本内容

五、处理属性节点
1. getAttribute 获取节点属性值

语法：object.getAttribute(attribute)

var a = document.getElementsByTagName(‘a’);

for(var i=0; i<a.length; i++){

    alert(a[i].getAttribute(‘title’));

}

2.setAttribute() 设置节点属性值

语法：object.setAttribute(attribute, value)

var link = document.getElementById(‘link’);

link.setAttribute(‘title’, ‘链接提示信息’);

六、处理文本节点

1. node.innerHTML
获取该节点下的包含HTML标签的文本内容

var body = document.querySelector(‘body’);

alert(html.innerHTML);2. node.textContent

获取该节点下的纯文本内容

var body = document.querySelector(‘body’);

alert(html.textContent);

注：两者的区别在于，innerHTML获取的文本带有标签，而textContent获取的文本把标签的除去。

Javascript初学篇章_7（DOM）的更多相关文章

  1. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  2. Javascript初学篇章_1（概念/数据类型）

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  3. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

  4. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  5. Javascript初学篇章_8（事件）

    事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...

  6. Javascript初学篇章_6（BOM）

    BOM 浏览器对象模型 BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象 一.window对象 Window对 象表示整个浏览器窗口. 1.系统消息框 alert() alert('he ...

  7. Javascript初学篇章_2（数据类型的查看和转换/运算符）

    三.数据类型的查看和转换 1.查看数据类型 typeof 说明:typeo可以查看变量的类型. 语法:alert(typeof  变量名或数据): 2.转换成字符串 var married = fal ...

  8. CSS3初学篇章_7(布局/浏览器默认样式重置)

    CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象, ...

  9. JavaScript之旅（DOM）

    JavaScript之旅(DOM) [TOC] 一.认识DOM 什么是 DOM? DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准 ...

随机推荐

  1. The certificate used to sign ***has either expired or has been revoked. An updated certificate is required to sign and install the application

    真机测试的时候弹出这样的提示:The certificate used to sign ***has either expired or has been revoked. An updated ce ...

  2. shell 指定范围产生随机数

    #/bin/bash echo "---------------产生随机数---------------" read -p "请输入起始数:" a read - ...

  3. 限制textarea的字数（包括复制粘贴）

    <textarea cols="100%" rows="10" id="tuconent" placeholder="评价( ...

  4. Linux文件权限和访问模式

    为了更加安全的存储文件,Linux为不同的文件赋予了不同的权限,每个文件都拥有下面三种权限: 所有者权限:文件所有者能够进行的操作 组权限:文件所属用户组能够进行的操作 外部权限(其他权限):其他用户 ...

  5. 卸载oracle 11g grid软件

    一,使用deinstall 同样,卸载grid软件在11g中也推出了了卸载工具deinstall卸载同卸载oracle数据库软件 具体可参考:Behaviour of the Oracle De-in ...

  6. C++ 系列：socket 资料收集

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  7. YUV格式介绍

    原文链接:http://www.cnblogs.com/azraelly/archive/2013/01/01/2841269.html YUV格式有两大类:planar和packed.对于plana ...

  8. Kafka vs RocketMQ—— Topic数量对单机性能的影响-转自阿里中间件

    引言 上一期我们对比了三类消息产品(Kafka.RabbitMQ.RocketMQ)单纯发送小消息的性能,受到了程序猿们的广泛关注,其中大家对这种单纯的发送场景感到并不过瘾,因为没有任何一个网站的业务 ...

  9. Go语言 获取get、post参数

    在贴代码之前如果能先理解一下golang http.request的三个属性Form.PostForm.MultipartForm应该能较好的理解代码,下面摘录一下. 以上简要翻译一下: Form:存 ...

  10. JS简单解决并发量

    经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading. 举个例子,一个下订单的页面,要查询常用地址信息. ...