`
shoren
  • 浏览: 59231 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

javaScript扫盲之DOM基础(一)

 
阅读更多

 

读《JavaScript DOM编程艺术》笔记

1DOM

DOM代表着加载到浏览器窗口的当前网页。我们通过JavaScript读取和操作DOM

根元素是html,代表整个文档。

 

2、节点:

文档是由节点构成的集合。

元素节点:DOM的原子是元素节点。标签的名字就是元素的名字。
文本节点:文本节点总是被包含在元素节点的内部。
属性节点:属性节点用来对元素做出更具体的描述。

属性总是被放在起始标签里,所以属性节点总是被包含在元素节点中。并非所有的元素都包含属性,但所有的属性都包含在元素里。

 

Eg:   <li class=”name”> MyName</li>

元素节点:<li class=”name”><li>

文本节点:MyName

属性节点 class=”name”

 

3、 获取元素

三种方法:通过元素ID、通过标签名字、通过类名字。

getElementById

返回一个对象。是document对象特有的函数。

操作符typeof给出其操作数的数据类型,是一个字符串、数值、函数、布尔值还是对象。

 

getElementsByTagName

返回一个数组。此函数允许把一个通配符作为它的参数。为了把通配符与乘法操作符区别,通配符要放在引号里。

Eg:获得id属性值是purchase的无序清单里的元素:

 var shopping = document.getElementById(“purchase”);

 var terms = shopping.getElementsByTagName(“*”);

 

getElementsByClassName

返回一个数组。

此函数还可以用来查找带有多个类名的元素。要指定多个类名,只要在字符串函数中用空格分隔类名即可,参数的顺序随便,即”a b””b a”意思一样。

Eg alert(document.getElementsByClassName(“important sale”).length);

 

4、获取和设置属性

getAttribute

此方法不属于document对象,只能通过元素节点对象调用。

 

setAttribute

两个参数:一个是属性名,一个是新的属性值。若不存在指定的属性,则先创建这个属性,再设置它的值。

 

【注意】通过setAttribute对文档进行修改后,在通过浏览器的view source(查看源代码)选项去查看文档的源代码时,看到的仍是改变前的属性值,也就是说,setAttribute作出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式:先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。这正是DOM的真正威力:对文档内容进行刷新却不需要在浏览器里刷新页面。

 

 

 

5DOM属性

childNodes属性

在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,它是一个包含这个元素所有子元素的数组。

Eg:得到文档中的body元素的全体子元素:

 document.getElementsByTagName(“body”)[0].childNodes;

 

nodeType属性

childNodes属性返回的数组包含所有类型的节点。事实上,文档中几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们也全部包含在childNodes属性所返回的数组当中。

 

nodeType属性总共有12种可取值,但其中仅有3种具有实用价值。

元素节点的nodeType属性值是1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

 

nodeValue属性

用来得到和设置一个节点的值。

Eg<p id="description">Choose an image.</p> 若此节点为description

注意:description.nodeValuenulldescription.childNodes[0].nodeValueChoose an image.

因为Choose an imagedescription的第一个子节点(文本元素)。

或者是description.firstChild.nodeValue

 

nodeValue赋值:description.firstChild.nodeValue = “the new value”;

 

 firstChild属性和lastChild属性

Node.firstChild; 等价于 node.childNodes[0];

Node.lastChild; 等价于 node.childNodes[node.childNodes.length-1];

分享到:
评论

相关推荐

    JavaScript dom操作 dom元素查询 示例代码

    JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...

    Javascript操作XML Dom

    Javascript操作XML Dom学习资料

    JavaScript DOM编程艺术【第2版&高清】.pdf

    1. JavaScript基础知识:JavaScript是一种在浏览器中运行的脚本语言,它是实现网页动态效果和交云的核心技术之一。要精通DOM编程,首先要对JavaScript语言本身有足够的理解,包括变量、数据类型、运算符、函数、对象...

    JavaScript DOM编程艺术(第2版pdf)+源代码

    JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍,专注于讲解如何使用JavaScript与Document Object Model(DOM)进行交互。DOM是Web页面的结构化表示,它允许我们通过编程方式操纵HTML和XML...

    JavaScript DOM编程艺术.pdf

    《JavaScript DOM编程艺术》是Jeremy Keith所著的一本关于JavaScript和DOM(文档对象模型)编程的经典图书,它不仅阐述了JavaScript和DOM的基本知识,还着重讲解了DOM编程技术背后的思路和原则。本书被赞誉为Web设计...

    JavaScriptDOM编程艺术(第2版)PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术(第2版)》。尽管实际书籍内容并未给出,但从标题、描述及部分链接信息来看,这本书主要涉及JavaScript...

    JavaScript基础和DOM API函数

    一、JavaScript基础 1. 位置:JavaScript代码可以放置在HTML的`&lt;head&gt;`或`&lt;body&gt;`标签内,通常`&lt;head&gt;`内的脚本定义全局函数,而`&lt;body&gt;`内的脚本处理页面加载后的交互。此外,通过`&lt;script&gt;`标签的`src`属性,可以...

    JavaScript.DOM编程艺术(第2版)附录及源码.rar

    《JavaScript.DOM编程艺术(第2版)》是一本深入探讨JavaScript与DOM(Document Object Model)交互的权威书籍。DOM是Web开发中的核心组件,它允许程序员通过JavaScript来操作HTML和XML文档的结构、内容和样式。这本书...

    javascript Dom 编程艺术

    本书是超级畅销书的升级版,由倡导Web标准的领军人物执笔,揭示了前端开发的真谛,是学习JavaScript和DOM开发的必读之作。 本 书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页...

    javascript_DOM操作

    JavaScript DOM(Document Object Model)是Web开发中的一个关键概念,它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构,将网页内容表示为节点和对象,每个元素、属性、文本甚至注释都是一个...

    javascriptDom编程艺术+源码

    《JavaScript DOM编程艺术》是一本深受开发者欢迎的JavaScript学习书籍,专注于DOM(Document Object Model)这一核心概念。DOM是Web页面的结构模型,通过JavaScript与DOM的交互,开发者可以实现对网页内容的动态...

    JavaScript5.0+DOM编程艺术pdf(最新中文版)

    JavaScript5.0+DOM编程艺术是一本深入探讨JavaScript和DOM编程技术的专业书籍,适用于初学者和进阶者。这本书详细讲解了JavaScript5.0版本的新特性,并结合DOM(Document Object Model)模型,帮助读者理解如何在...

    javaScript-DOM编程艺术

    JavaScript-DOM编程艺术是关于如何...总之,JavaScript-DOM编程艺术涵盖了JavaScript语言基础和DOM操作技巧,是网页动态化和交互设计的重要组成部分。通过学习这部分内容,开发者可以创建更加生动、用户友好的Web界面。

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    总之,"JavaScript DOM编程艺术(第2版)"是Web前端开发者的宝贵资源,它涵盖了从基础到进阶的JavaScript DOM知识,通过随书附带的源代码和PDF,读者可以理论结合实践,提升自己的Web开发技能。无论你是初学者还是经验...

    JavaScript DOM编程艺术(中文第2版).pdf

    javascript入门必备,本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书将这些概念贯穿在书中...

    JavaScript程序设计——DOM访问实验报告.docx

    实验报告的主题是“JavaScript程序设计——DOM访问”,其目的是深入理解和掌握DOM(Document Object Model)在JavaScript中的应用,包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示,允许...

    JavaScript & DOM Enlightenment

    同时,随着Web组件和框架(如React、Vue、Angular)的流行,理解JavaScript和DOM的基础变得更为重要,因为它们是这些高级技术的基石。 通过"JavaScript Enlightenment",你可能会学习到如何编写高效、可维护的...

    JavaScript dom操作 删除元素 示例代码

    JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...

    JavaScript实现获取dom中class的方法

    本文主要介绍了如何使用JavaScript...这涉及到对DOM操作的理解和对特定方法的应用,对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点,开发者可以更加灵活地处理页面元素,进行动态的内容修改或交互设计。

    JavaScript dom操作 趣味案例

    本资源为JavaScript的dom操作的趣味案例,可直接打开查看本资源为JavaScript的dom操作的趣味案例,可直接打开查看本资源为JavaScript的dom操作的趣味案例,可直接打开查看本资源为JavaScript的dom操作的趣味案例,可...

Global site tag (gtag.js) - Google Analytics