【nodeValue、firstChild和lastChild属性】的更多相关文章

nodeValue、firstChild和lastChild属性

nodeValue属性如果想改变一个文本节点的值,那就使用DOM提供的nodeValue属性,他用来得到(和设置)一个节点的值:node.nodeValue但是有个细节必须注意:在用nodeValue属性获取description对象的值时,得到的并不是包含在这个段落里的文本.可以用下面这条alert语句来验证这一点:alert(description.nodeValue);html代码如下<html><body><p id = "description"…

JavaScript之firstChild属性、lastChild属性、nodeValue属性学习

1.数组元素childNodes[0]有更直观易读的优点,这边在介绍一个有同样功能的属性,且更加语义化-------->firstChild属性 假设我们需要目标元素节点下的所有子元素中的第一个子元素我们可以这样做: 目标元素节点下的子元素节点数组.firstChild 这句代码等价于 目标元素节点下的子元素节点数组[0]; 目标元素节点.childNodes[0] 这句代码等价于 目标元素节点.firstChild; 与此类推当我们需要目标元素节点下的所有子元素节点中的最后一个元素我们可以这样…

选择器:first-child与:last-child失效的解决方法

作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与:last-child就遇到了失效的问题: 使用一个并列显示的不同尺寸的图片为例(如图) 初始代码为: <div class="catalog"> <a href="#"><img src="images/xiaomi-log.p…

CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用

以下示例主要讲解nth-child.first-child.last-child.nth-of-type.first-of-type和last-of-type使用. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>CSS 高级选择器使用</title> <style> * {…

CSS3中first-child、last-child、nth-child、nth-last-child

1.单独指定第一个子元素.最后一个子元素的样式 <style type="text/css"> li:first-child{ background:yellow; } li:last-child{ background:blue; } </style> 2.对指定序号的子元素使用样式 <style type="text/css"> li:nty-child(2){ background:yellow; }//对第二个子元素设定背…

CSS选取指定位置标签first-child、last-child、nth-child

1.first-child 选择列表中的第一个标签. 2.last-child 选择列表中的最后一个标签 3.nth-child(n) 选择列表中的第n个标签 4.nth-child(2n) 选择列表中的偶数标签 5.nth-child(2n-1) 选择列表中的奇数标签 6.nth-child(n+3) 选择列表中的标签从第3个开始到最后 7.nth-child(-n+3) 选择列表中的标签从0到3,即小于3的标签 8.nth-last-child(3) 选择列表中的倒数第3个标签…

first-child和last-child选择器 nth-child(n）第几个元素 nth-last-child(n)倒数第几个元素

:first-child 和  :last-child 分别表示父元素中第一个 或者  最后一个 子元素设置样式,如上图…

选择器的使用(first-child和last-child选择器)

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <style type="text/css"…

first-child、last-child误解

MDN解释兄弟元素中的第一个元素 然后今天写的时候这样想出现了问题 并没有加上边框 W3C解释 尝试去掉h3,发现span加上了边框 E:first-child含义 父元素中第一个元素且第一个元素是E才是所谓的first-child, last-child也类似…

jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>子(后代)元素过滤选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type…

js node.children与node.childNodes与node.firstChild,node,lastChild之间的关系

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/06/js-node-children%e4%b8%8enode-childnodes%e4%b8%8enode-firstchildnodelastchild%e4%b9%8b%e9%97%b4%e7%9a%84%e5%85%b3%e7%b3%bb/…

第四章 用javascript和DOM去建立一个图片库

把整个图片库的浏览链接集中安排在你的图片库里,只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给它. 代码如下: <body> <ul> <li> <a href="images/4-1.png" onclick="showPic(this);return false">图片1</a> </li> <li> <a href="images/4-2.png&q…

DOM-Node类型

DOM(文档队形模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的一部分.DOM可以讲任何HTML和XML文档描绘成一个有多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息.每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.总共有12种节点类型,这些类型都继承自一个基类型-Node类型 N…

《JavaScript DOM编程艺术》读后总结

这是我读的第一本关于JS的书,刚开始我为了选择合适的学习JS的书,看了网上许多人的意见,基本上都是推荐先读这本书.书的内容挺简单的,确实很适合初学者看,阅读的过程中不会产生什么障碍.内容虽然简单,但我觉得还是挺有收获的,之前我主要是通过看视频学习JS的,看了好些视频,了解了好些概念,但对好多概念都是似懂非懂的,认识的不是很真切.通过阅读这本书,使我对前面了解的那些概念有了更清楚的认识,同时,书中还反复强调了几个重要的思想,我觉得这也是很有价值的,很具有指导意义. 书中的第一章是介绍JS的简史的,…

JS010-DOM

JS010-DOM 本章内容: 1.理解包含不同层次节点的DOM 2.使用不同的节点类型 3.客服浏览器兼容性问题及各种陷阱 DOM(文档对象模型)是针对 HTML和xml文旦过得一个API(应用程序编程接口). 10.1 节点层次 DOM可以将HTML或XML文档描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法.节点之间也存在着某种关系. <html> <head> <title>sample page</title> </hea…

DOM系列---基础篇

DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 产生于 网景公司及微软公司创始的 DHTML(动态 HTML) ,但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. DOM 中的三个字母: D(文档)可以理解为整个 Web 加载的网页文档: O(对象)可以理解为类似 window…

04 DOM一窥

BOM 浏览器对象模型 * window       alert(); 弹出框 confirm() 询问框 setInterval("run()",1000); 每隔1秒执行run方法,返回唯一的id值 setTimeout("run()",1000); 一秒后执行run方法,返回唯一的id值       clearInterval(id)       clearTimeout(id)       open(); 弹出新的窗口       close(); 关闭窗口…

HTML DOM基础知识

HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3.通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口.这个入口,连同对 HTML 元素进行添加.移动.改变或移除的方法和属性,都是通过文档对象模型来获得…

JavaScript 闯关记

DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.以下面的 HTML 为例: <html>…

4.前端笔记之jsdom基础

一.简介 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM编程: DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准. HTML DOM 节点树 通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问.所有 HTML 元素(节点)均可被修改,也可以创建或删除节点. 理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签.head标签是html子标签,meta和ti…

javascript 操作dom

Node往往被翻译为节点,在一个对象(可以简单的理解为是HTML页面中),一个属性name="aaa"可以是一个节点,一个< div id="aaa">……< /div>也可以是一个节点,在< body>……< /body>中的,也是一个大大的节点.下面是一些有关Node的属性和方法,并没有包含部分不兼容IE和FF内容的讲解. Node的属性介绍: nodeType:显示节点的类型 nodeName:显示节点的名称 n…

DOM系列---基础篇[转]

DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 产生于 网景公司及微软公司创始的 DHTML(动态 HTML) ,但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. DOM 中的三个字母: D(文档)可以理解为整个 Web 加载的网页文档: O(对象)可以理解为类似 window 对象之类的东西,可以调用属性…

Dom文档模型

文档对象模型     通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口.这个入口,连同对 HTML 元素进行添加.移动.改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM).      Core DOM     定义了一套标准的针对任何结构化文档的对象. XML DOM     定义了一套标准的针对 XML 文档的对象. HTML DOM…

JavaScript--DOM基础(19)

// DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口); // DOM描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分; 一 DOM介绍 // D(文档):可以理解为整个Web加载的网页文档; // O(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象; // M(模型):可以理解为网页文档的树形结构; 1.节点 // 加载HTML页面时,Web浏览器生…

JavaScript高级程序设计（第三版）学习笔记8、9、10章

第8章,BOM BOM的核心对象是window,具有双重角色,既是js访问浏览器的一个接口,又是ECMAScript规定的Global对象.因此,在全局作用域中声明的函数.变量都会变成window对象的属性和方法. 例: var age = 20; function sayAge(){ alert(this.age); } alert(window.age); window.sayAge(); 定义全局变量与在window对象上直接定义属性区别:全局变量不能通过delete操作符删除,而直接在w…

【JavaScript DOM编程艺术(第二版)】笔记

第1章 javascript简史 1.什么是DOM? 简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.\         第2章 javascript语法 1.内建对象: 内建在javascript语言里的对象.(可以new出来的)   2.宿主对象: 由浏览器提供的预定义对象称为宿主对象.         第3章 DOM 1.getElementById(): 使用getElementById()方法,返回一个与那个有着给定ID属性值的元素节点对应的对象,该方法的参数就是指定的ID,…

javascript基础DOM操作

DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以理解为网页文档的树型结构. DOM 有三个等级,分别是 DOM1.DOM2.DOM3,并且 DOM1 在 1998 年 10 月成为W3C 标准.DOM1 所支持的浏览器包括 IE6+.Firefox.Safari.Chrome 和 Opera1.7+. 1.节点 加载 HTML 页面时,Web 浏…

Javascript高级程序设计读书笔记（第10章 DOM）

第10章 DOM 10.1  节点层次 每个节点都有一个nodeType属性,用于表明节点的类型.任何节点类型必是下面中的一个: Node.Element_NODE(1); NODE.ATTRIBUTE_NODE(2); Node.TEXT_NODE(3); Node.CDATA_SECTION_NODE(4); Node.ENTITY_REFERENCE_NODE(5); Node.ENTITY_NODE(6); Node.PROCESSING_INSTRUCTION_NODE(7); Nod…

《JavaScript 闯关记》之 DOM（上）

DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息及(或)标记.每个节点都拥有各自的特点.数据和方法,另外也与其他节点存在某种关系.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构.以下面的 HTML 为例: <html>…

第一百一十三节，JavaScript文档对象，DOM基础

JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 一．DOM介绍 DOM中的三个字母,D(文档)可以理解…