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. 转载:《.NET 编程结构》专题汇总（C#）

    <.NET 编程结构>专题汇总(C#) - M守护神 - 博客园http://www.cnblogs.com/liusuqi/p/3213597.html 前言     掌握一门技术,首要 ...

  2. tp框架，访问方式、空方法

    访问MVC模式 方法: 在Application文件夹里新建一个文件夹Admin,在Admin里面新建与Home文件夹内相同的5个文件夹,分别为:Common.Conf.Controller.Mode ...

  3. android 对话框 setMultiChoiceItems 设置 初始化勾选

    只需要 设定第二个参数 boolean[] 值就好了

  4. Java Web技术之Cookie

    Cookie:它是服务器在获取到用户的请求之后,把用户的请求中的重要资源保存在这个对象中,在给用户响应的时候,把这个对象发给客户端.然后浏览器接收到这个Cookie之后,浏览器会自动的把Cookie中 ...

  5. ES6扫盲

    原文阅读请点击此处 一.let和const { // let声明的变量只在let命令所在的代码块内有效 let a = 1; var b = 2; } console.log(a); // 报错: R ...

  6. 在linux 服务器上用.htaccess文件实现二级域名访问子目录

    实现子域名绑定网站子目录的方法有很多,比如可以用js跳转,可以用php实现,可以301跳转等,但最常用的应该是RewriteEngine方式了.   新建一个笔记本命名为.htaccess(在wind ...

  7. Lintcode 85. 在二叉查找树中插入节点

    -------------------------------------------- AC代码: /** * Definition of TreeNode: * public class Tree ...

  8. 动态创建DAL层类的实例

    为了可扩展性,方便以后对于代码的修改维护,使用动态创建DAL层对象. 1.首先在webconfig中的configuration下添加配置项 <appSettings> <add k ...

  9. Centos 下编译安装Redis

    安装环境说明: 操作系统:Centos 6.5 -64bit 安装路径:/usr/local/redis 开始编译redis tar -zxvf redis-2.8.19.tar.gz cd redi ...

  10. java时间计算,获取某月第一天和最后一天

    //获取前月的第一天 SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd"); //获取当前月第一天: Calendar ...