JavaScript学习笔记九

本文根据慕课网课程《JavaScript进阶》学习整理

认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法:

document.getElementsByName(name)

与getElementById() 方法不同的是,通过元素的 name 属性查询元素,而不是通过 id 属性。

注意:

1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。

看看下面的代码:

运行结果:

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法:

getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称,如p、a、img等标签名。

2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。

看看下面代码,通过getElementsByTagName()获取节点。

区别getElementByID,getElementsByName,getEle

以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码,是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字,可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类,getElementsByTagName获取相同类的人集合。如获取小孩这类人,getElementsByTagName("小孩")。

把上面的例子转换到HTML中,如下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

方法总结如下:

注意:方法区分大小写

通过下面的例子(6个name=”hobby”的复选项,两个按钮)来区分三种方法的不同:

  <input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">
  1. document.getElementsByTagName(“input”),结果为获取所有标签为input的元素,共8个。
  2. document.getElementsByName(“hobby”),结果为获取属性name=”hobby”的元素,共6个。
  3. document.getElementById(“hobby6”),结果为获取属性id=”hobby6”的元素,只有一个,”跑步”这个复选项。

getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法:

elementNode.getAttribute(name)

说明:

1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

2. name:要想查询的元素节点的属性名字

看看下面的代码,获取h1标签的属性值:

运行结果:

h1标签的ID :alink
h1标签的title :getAttribute()获取标签的属值

setAttribute()方法

etAttribute() 方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

语法:

elementNode.setAttribute(name,value)

说明:

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意:

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。

2.类似于getAttribute()方法,setAttribute()方法只能通过元素节点对象调用的函数

节点属性

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

  1. nodeName : 节点的名称
  2. nodeValue :节点的值
  3. nodeType :节点的类型

一、nodeName 属性: 节点的名称,是只读的。

  1. 元素节点的 nodeName 与标签名相同
  2. 属性节点的 nodeName 是属性的名称
  3. 文本节点的 nodeName 永远是 #text
  4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:节点的值

  1. 元素节点的 nodeValue 是 undefined 或 null
  2. 文本节点的 nodeValue 是文本自身
  3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

元素类型 节点类型

元素 ? ? ? 1

属性 ? ? ? 2

文本 ? ? ? 3

注释 ? ? ? 8

文档 ? ? ? 9

访问子结点childNodes

访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。

语法:

elementNode.childNodes

注意:

如果选定的节点没有子节点,则该属性返回不包含节点的 NodeList。

我们来看看下面的代码:

运行结果:

IE:

UL子节点个数:3

节点类型:1

其它浏览器:

UL子节点个数:7

节点类型:3

注意:

  1. IE全系列、firefox、chrome、opera、safari兼容问题
  2. 节点之间的空白符,在firefox、chrome、opera、safari浏览器是文本节点,所以IE是3,其它浏览器是7,如下图所示:

如果把代码改成这样:

<ul>
    <li>javascript</li>
    <li>jQuery</li>
    <li>PHP</li></ul>

运行结果:(IE和其它浏览器结果是一样的)

UL子节点个数:3

节点类型:1

时间: 2024-10-07 06:23:25

JavaScript学习笔记九的相关文章

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

APUE 学习笔记(九) 高级I/O

1. 非阻塞I/O 低速系统调用时可能会使进程永远阻塞的一类系统调用,包括以下调用: (1)某些文件类型你(网络socket套接字.终端设备.管道)暂无可使用数据,则读操作可能会使调用者永远阻塞 (2)如果数据不能立即被(1)中文件类型接受,则写操作会使调用者永远阻塞 (3)某些进程间通信函数 非阻塞I/O使我们可以调用open.read.write这样的I/O操作,并使这些操作不会永远阻塞,如果这种操作不能完成,则调用立即出错返回 对于一个给定的文件有两种方法对其指定非阻塞I/O: (1)调用

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

javascript学习笔记---ECMAScript语法(辅助)

1.区分大小写. test与Test变量是两个不同的变量 2.变量是弱变量. 与C,java等等语言变量不是很一样. 如下java代码 ? 1 2 3 4 int i =0; //再次赋值 i = 10;//ok i = "hello";//wrong 类型不匹配 javascript ? 1 2 3 4 var i = 9; //再次赋值 i = 10;//ok i = "hello";//ok 但是不建议这么干,如此会给开发造成干扰,不明确变量的类型.(变量命名

javascript学习笔记---ECMAScript语法(变量)

变量声明关键字var: var i = 1: var t = "asd"; var test1 = "hi", test2 = "hello"; 声明变量不一定要初始化, var i;//ok 另一方面在使用变量前若未加关键字var,则此变量为全局变量(此特性需特别记住). 变量名字: 变量名需要遵守两条简单的规则: 第一个字符必须是字母.下划线(_)或美元符号($) 余下的字符可以是下划线.美元符号或任何字母或数字字符 命名变量规则: Came