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. 解决ftp上传connection reset错误

    切换到管理员,cmd下面执行:netsh advfirewall set global StatefulFTP disable MS对此的解释:https://technet.microsoft.co ...

  2. 在ubuntu下安装google chrome

    由于手上有两台电脑,再加上我那个选择困难症加上纠结劲.所以果断把其中一台电脑只装linux系统,另一台电脑只装windows了.免得我老纠结!于是linux便选择了ubuntu. 由于浏览器一直用的是 ...

  3. Golang 语法学习笔记

    Golang 语法学习笔记 包.变量和函数. 包 每个 Go 程序都是由包组成的. 程序运行的入口是包 main. 包名与导入路径的最后一个目录一致."math/rand" 包由 ...

  4. Console app 里的依赖注入及其实例生命周期

    依赖注入是 ASP.NET Core 里的核心概念之一,我们平常总是愉快地在Startup类的ConfigureServices方法里往IServiceCollection里注册各种类型,以致有一些同 ...

  5. dvd管理系统

    >>>>>>>>>>>>>>>>>>>> 语言:java 工具:eclipse ...

  6. Python网络数据采集系列-------概述

    这是一个正在准备中的系列文章,主要参考的是<Web Scraping with Python_Collecting Data from the Modern Web-O'Reilly(2015) ...

  7. React 编程思想翻译及学习笔记

    第一步:把UI图按组件层次结构拆分开 FilterableProductTable (橙色): 包含整个例子 SearchBar (蓝色): 接收所有用户输入 ProductTable (绿色): 基 ...

  8. java-并发-活性

    浏览以下内容前,请点击并阅读 声明 一个并发程序以适时方式执行的能力叫活性.以下部分介绍最常见的一种活性问题,死锁,并简单介绍其他两种活性问题,饥饿和活锁. 死锁 死锁描述了一种情况:两个或两个以上的 ...

  9. Easyui Ajax验证Form表单。。。

        今天做项目用到easyui Ajax验证表单.本想自定义一个easyui的验证,查资料发现easyui 自带了一个通用的验证!见以下下截图. 后台返回值 true验证通过,返回false验证失 ...

  10. oracle 和c3p0 数据库的Time_Wait 过多问题的一个解决方案。

    项目是B/S模式,放在linux服务器上,tomcat和oracle11g在一台服务器上,tomcat读取数据库采用C3P0连接池,一直比较稳定,所以也没有去管.后来把tomcat放在一台win200 ...