JavaScript对象的chapterIII
二、DOM对象：
DOM (document object model) 文档对象模型，它定义了操作文档对象的接口。
DOM 把一份html文档表示为一棵家谱树，使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系。
一、节点
元素节点：
元素节点如
<body> <p> <div> 之类的元素，这些元素在文档中的布局形成了文档的结构。
文本节点：
文本节点指的是元素节点中的内容，但并非所有的元素节点都包含有文本节点。
属性节点：
元素都或多或少有一些属性，属性的作用是对元素作出更具体的描述。属性节点总是被包含在元素节点当中。
二、获取文档对象：
1.
querySelector()
通过传入合法的CSS选择器，即可获取符合条件的第一个元素
2.
querySelectorAll()
通过传入合法的CSS选择器，即可获取所有符合条件的元素，返回对象数组
注意：使用这上面两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover’)不会得到结果。
3.getElementById()
获取给定id属性值的元素节点相对应的对象。
4.getElementsByTagName()
获取文档里给定标签的所有符合条件的元素，返回对象数组
5.getElementsByName()
通过 name 获取一个对象数组
6.getElementsByClassName()
通过 classname 获取一个对象数组
三、间接引用节点：
1.引用子节点：
childNodes[]：
每个节点都有一个childNodes集合属性，类型是数组对象，表示该节点的所有子节点的集合。这些子节点按照其在文档中出现的顺序排列，因此可以通过索引来依次访问各个子节点。
firstChild:
第一个子节点。
lastChild:
最后一个子节点。
2.引用父节点：
parentNode：
除了根节点外，每个节点都仅有一个父节点。
3.引用兄弟节点：
nextSibling：
引用下一个兄弟节点。
previousSibling：
引用上一个兄弟节点。
四、获取节点信息：
1.获取节点名称——nodeName
元素节点：返回标记名称;
属性节点：返回属性名称;
文本节点：返回文本
#text
2.获取节点类型——nodeType
元素节点：返回 1
属性节点：返回 2
文本节点：返回 3
3.获取节点的值——nodeValue
元素节点：返回null
属性节点：返回节点值
文本节点：返回文本内容
五，处理节点
1.属性节点：
获取节点属性值——getAttribute
设置节点属性值——setAttribute
2.文本节点：
innerHTML——获取该节点下的包含HTML标签的文本内容
textContent——获取该节点下的纯文本内容
3.空白节点:
ie浏览器和firefox浏览器对空白节点的处理不同，ie浏览器会忽略这些节点，而Firefox浏览器则认可这些节点。
1.避免在文档中出现文本节点。
2.在使用前先删除其中的空白节点。
function
cleanWhitespace(element){
for(var
i=0; i < element.childNodes.length; i++){
var
node = element.childNodes[i];
//判断是否是空白节点，如果是则删除该节点
if(node.nodeType
== 3 && !/\S/.test(node.nodeValue){
node.parentNode.removeChild(node);
}
}
}
JavaScript对象的chapterIII的更多相关文章
- json与JavaScript对象互换
1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...
- javaScript对象－基本包装类型的详解
本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...
- 如何理解javaScript对象？
在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...
- 简述JavaScript对象、数组对象与类数组对象
问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...
- 深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
- Javascript对象的方法赋值
Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- 如何判断Javascript对象是否存在
Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
随机推荐
- JAVASE02-Unit08： 文本数据IO操作 、 异常处理
Unit08: 文本数据IO操作 . 异常处理 * java.io.ObjectOutputStream * 对象输出流,作用是进行对象序列化 package day08; import java.i ...
- 异常：java.io.IOException: Too many open files:
原因: 操作系统的中打开文件的最大句柄数受限所致,常常发生在很多个并发用户访问服务器的时候.因为为了执行每个用户的应用服务器都要加载很多文件(new一个socket就需要一个文件句柄),这就会导致打开 ...
- CentOS 7中防火墙 firewall-cmd命令
在 CentOS 7 iptable 防火墙已经被 firewall替代 1.暂时开放FTP服务 firewall-cmd --add-service=ftp 2.永久开放FTP服务 firewall ...
- 初始Python
一.Python简介 1.Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新 ...
- java代码打包成jar以及转换为exe
教你如何把java代码打包成jar文件以及转换为exe可执行文件 1.背景: 学习java时,教材中关于如题问题,只有一小节说明,而且要自己写麻烦的配置文件,最终结果却只能转换为jar文件.实在是心有 ...
- win10 pro 1511 激活成功
slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms franklv.ddns.net slmgr /ato
- JDBC基础与连接sql2012
JDBC简介 JDBC全称为:Java Data Base Connectivity(java数据库连接),它主要由接口组成. 组成JDBC的2个包: java.sql javax.sql 以上2个包 ...
- LeetCode: Queue Reconstruction by Height
这题的关键点在于对数组的重排序方法,高度先由高到低排列不会影响第二个参数,因为list.add的方法在指定index后面插入,因此对于同高的人来说需要对第二个参数由低到高排,具体代码如下 public ...
- 界面使用webview，并且webview里面有图片进行自动切换导致界面上滚动条卡顿。
最近的项目是用webview做的界面,但是在界面顶端加了android本地动画效果的横向滚动条.当webview里面的图片切换时导致滚动条动画卡顿. 1:setLayerType(View.LAYER ...
- python staticmethod and classmethod方法
静态方法无绑定,和普通函数使用方法一样,只是需要通过类或者实例来调用.没有隐性参数. 实例方法针对的是实例,类方法针对的是类,他们都可以继承和重新定义,而静态方法则不能继承,可以认为是全局函数. #h ...