二、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的更多相关文章

  1. json与JavaScript对象互换

    1,json字符串转化为JavaScript对象: 方法:JSON.parse(string) eg:var account = '{"name":"jaytan&quo ...

  2. javaScript对象－基本包装类型的详解

    本人按书上的内容大致地把javaScript对象划分成“引用类型”.“基本包装类型”和“内置对象”三块内容. 我们这篇先了解下基本包装类型的详细用法吧! 一.我们先解下相关概念: 1.引用类型的值(对 ...

  3. 如何理解javaScript对象？

    在我们生活中,常常会提到对象一词,如:你找到对象了吗?你的对象是谁呀?等等. 在我们家庭中,有男友的女青年都会说我有对象了,那么她的对象是XX(她的男友). 夫妻间呢?都会说我的爱人是谁谁谁,现在我们 ...

  4. 简述JavaScript对象、数组对象与类数组对象

    问题引出 在上图给出的文档中,用JavaScript获取那个a标签,要用什么办法呢?相信第一反应一定是使用document.getElementsByTagName('a')[0]来获取.同样的,在使 ...

  5. 深入理解javascript对象系列第二篇——属性操作

    × 目录 [1]查询 [2]设置 [3]删除[4]继承 前面的话 对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...

  6. Javascript对象的方法赋值

    Javascript对象编程学习中,一直不能很好的掌握对象的属性(property)和方法(method).今天在写代码过程中,又犯了一个低级错误. <!DOCTYPE html> < ...

  7. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  8. 如何判断Javascript对象是否存在

    Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: ...

  9. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

随机推荐

  1. Java语言程序设计(基础篇) 第三章 选择

    第三章 选择 3.8 计算身体质量指数 package com.chapter3; import java.util.Scanner; public class ComputeAndInterpret ...

  2. layzr.js新版使用方法

    转载请注明出处:http://www.cnblogs.com/fiter/p/5413919.html 前言 今天研究这个JS库,本人新手,将官方的js代码下载下来后始终无法正常使用,经过多番尝试,终 ...

  3. git基本配置

    用户信息 你个人的用户名称和电子邮件地址,用户名可随意修改,git 用于记录是谁提交了更新,以及更新人的联系方式. $ git config --global user.name "Donl ...

  4. 【VirtualBox】 Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host

    win10 VirtualBox_5.0.24.8355_Win 安装后导入.ova 文件后 虚拟机不能正常启动 ===> 解决: “打开网络和共享中心” “更多适配器设置” 选择 对应的网络适 ...

  5. 个人训练记录-赛码"bestcoder"杯中国大学生程序设计冠军赛

    A.Movie 题意是给n个线段,要求求出是否存在三个不相交的线段,是的话输出yes,否则输出no.根据贪心的想法,可以先找出右端点r'最小的线段,他是三条线段中最左的那条,再找出左端点l'最大的线段 ...

  6. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  7. NSAttributedString字符串属性类

    //定义一个可变字符串属性对象aStr NSMutableAttributedString *aStr = [[NSMutableAttributedString alloc]initWithStri ...

  8. 我的第一个开源项目-logger4Net

    学会学习,学会分享,学会创造. 这我的第一个开源项目.以前总觉得开源离自己很远,但通过不断学习发现,其实自己已经走在这条路上.思想就在那,只要懂得学习,懂得分享,就会懂享受创造的快乐感与殷实感. 没做 ...

  9. Java多线程开发系列之三：线程这一辈子（线程的生命周期）

    前文中已经提到了,关于多线程的基础知识和多线程的创建.但是如果想要很好的管理多线程,一定要对线程的生命周期有一个整体概念.本节即对线程的一生进行介绍,让大家对线程的各个时段的状态有一定了解. 线程的一 ...

  10. ASP.NET 前后台调用方法

    Asp.Net中几种相似的标记符号: <%=...%>< %#...%>< %%>< %@ %>解释及用法 答: < %#... %>:是在 ...