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. tp5 model 中的查询范围(scope)

    查询范围scope在model中定义,在controller中使用 namespace app\index\model; use think\Model; class User extends Mod ...

  2. 8. UIViewController

    1. UIViewController 的认识 UIViewController在iOS开发中占据很重要的位置,iOS的整个UI开发的核心思想也是MVC的架构,从UIViewController的命名 ...

  3. android 决解启动屏白黑屏会延迟几秒的问题

    通常写启动屏,都有个很不喜欢的问题,就是会空白几秒才显示界面,而且界面还是很简单的! 解决办法 1 写一个透明的主题,一般启动屏都是不要bar的所以继承AppTheme.NoActionBar < ...

  4. Oracle Database 12c Release 1下载安装（自身经历）

    1.访问Oracle官网:https://www.oracle.com/index.html,下载Oracle Database 12c Release 1 (注意:File1和File2都要下载!! ...

  5. ubuntu系统怎么分区

    首先科普下windows和linux的文件系统和主分区: 1.电脑的主分最多只有只能由四个.如果是win7和linux双系统,则windows系统可能会占到1-2个主分区,那linux最多只能有两个主 ...

  6. C 标准库系列之assert.h

    先简单介绍一下<assert.h>头文件,该头文件的目的便是提供一个宏assert的定义,即可以在程序必要的地方使用其进行断言处理:断言在程序中的作用是当在调试模式下时,若程序给出的前提条 ...

  7. Android Studio中获取SHA1或MD5的方法

    原来在Eclipse中获取SHA1或者MD5,在IDE界面上就可以查找到. 切换到Android Studio后,如何查看呢?找了半天没找到.那就老办法命令行. 第一步.打开Android Studi ...

  8. my links

    如何解決MySQL 開動不到的問題 MySQL start fail 10 BEST JQUERY FILE UPLOAD PLUGINS WITH IMAGE PREVIEWS Spring MVC ...

  9. iOS 检测状态栏点击事件

    当tableView.scrollsToTop=YES不管用时,可以使用以下方法实现点击状态栏使tableView滚动到顶部. - (void) touchesBegan:(NSSet *)touch ...

  10. Laravel使用笔记 —— migration

    在使用 php artisan make:migration 创建migration时,可用 --path 指定创建migration文件的路径, 如果在执行的 php artisan migrate ...