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. 【Django】--Form组件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 例子: 1.创建Form类 from djan ...

  2. Appium_Python_Api文档

    1.contextscontexts(self): Returns the contexts within the current session. 返回当前会话中的上下文,使用后可以识别H5页面的控 ...

  3. 卡拉OK效果的实现-iOS音乐播放器

    自己编写的音乐播放器偶然用到这个模块,发现没有思路,而且上网搜了搜,关于这方面的文章不是很多,没找到满意的结果,然后自己也是想了想,最终实现了这种效果,想通了发现其实很简单. 直接上原理: 第一种: ...

  4. tp框架之session

    系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成,该函数可以完成Session的设置.获取.删除和管理操作. session初始化设置 如果session ...

  5. 【Java EE 学习 69 上】【struts2】【paramsPrepareParamsStack拦截器栈解决model对象和属性赋值冲突问题】

    昨天有同学问我问题,他告诉我他的Action中的一个属性明明提供了get/set方法,但是在方法中却获取不到表单中传递过来的值.代码如下(简化后的代码) public class UserAction ...

  6. shell循环语句

    所有的笔记只记录一些例子,根据例子解释一些出现的语法,不介绍具体的语法 2015-07-01 21:58:33 星期三 for循环 用例一用for循环在家目录下创建aaa1-aaa10,然后在aaa1 ...

  7. 【Java并发系列02】Object的wait()、notify()、notifyAll()方法使用

    一.前言 对于并发编程而言,除了Thread以外,对Object对象的wati和notify对象也应该深入了解其用法,虽然知识点不多. 二.线程安全基本知识 首先应该记住以下基本点,先背下来也无妨: ...

  8. 高性能的JavaScript--数据访问（2）

    动态作用域 无论是with表达式还是try-catch表达式的catch子句,以及包含()的函数,都被认为是动态作用域.一个动态作用域只因为代码运行而存在.因此无法通过静态分析(查看代码机构)来确定( ...

  9. swift - 字典和集合

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4dbf56 } p.p2 { margin: 0.0px 0. ...

  10. UVA 11168 Airport（凸包+直线方程）

    题意:给你n[1,10000]个点,求出一条直线,让所有的点都在都在直线的一侧并且到直线的距离总和最小,输出最小平均值(最小值除以点数) 题解:根据题意可以知道任意角度画一条直线(所有点都在一边),然 ...