JavaScript的DOM编程--07--节点的属性

节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整数, 这个数值代表着给定节点的类型. 只读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点3). nodeValue:返回给定节点的当前值(字符串). 可读写的属性 ①. 元素节点, 返回值是 null. ②. 属性节点: 返回值是这个属性的值 ③. 文本节点: 返回值是这个文…

javascript之DOM编程设置节点插入节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr…

HTML、css、javascript、DOM编程

HTML.css.javascript.DOM编程一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区分大小写,由<html>开始</html>结束,里面由头部分<head></head>和体部分<body></body>两部分组成,头部分的内容会先加载,里面的内容是给html页面增加一些辅助或者属性信息,体部分是真正存放页面数据的地方.…

DOM中元素节点、属性节点、文本节点的理解

DOM中元素节点.属性节点.文本节点的理解节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型节点类型元素(ELEMENT_NODE) 1 属性(ATTRIBUTE_NODE) 2 文本(TEXT_NODE) 3 注释(COMMENT_NODE) 8 文档(DOCUMENT_NODE) 9 在实际应…

JavaScript的DOM编程--03--读写属性节点

读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值 1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Doc…

JavaScript的DOM编程--12--innerHTML属性

innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <scr…

JavaScript的DOM编程--02--获取元素节点

如何来获取元素节点: 1) .document.getElementById: 根据 id 属性获取对应的单个节点 2) .document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度 3) .document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie…

高性能Javascript(2) DOM编程

第三部分 DOM编程文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM APIs主要用于访问这些文档中的数据.尽管DOM是与语言无关的API,在浏览器中的接口却是以JavaScript实现的.客户端大多数脚本程序与文档打交道,DOM就成为JavaScript代码日常行为中重要的组成部分. 2.1 DOM Access and Modification DOM访问和修改…

DOM中元素节点、属性节点、文本节点

DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是3. 元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text 对于文本节点,nodeValue 属性包含文本. 对于属性节点,nodeValue 属性包含属性值. nodeValue 属性对于文档节点和元素节点是不可用的. n…

高性能JavaScript之DOM编程

我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次訪问DOM.都要途径这座桥,并交纳"过桥费",訪问DOM的次数越多,费用也就越高.因此.推荐的做法是尽量降低过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么.如何才干提高程序的效率? 1.DOM訪问与改动訪问DOM元…

DOM简介及节点、属性、查找节点的方法

DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式.DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合. xml——>xhtml——>html4.0——>html5HTML和xml的区别:除了xml可以自定义标签外基本上没区别,xml被json替代了. document,单独写的时候,它代表整个文档,隐式的写在html标签的上一…

javascript之DOM（一节点类型Node）

DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推荐标准. IE中的所有DOM对象都是以COM对象的形式实现. 节点层次 DOM可以将任何HTML或XML文档描绘成一个有多层节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中的不同信息及标记.每个节点都有各自的属性,数据和方法,同时也与其他节点存在联系.所有页面标记表现为以一个特定节点为…

JavaScript的DOM编程--08--复习

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> //1. 节点的类型: 元素节点.属性节点.文本节点 //通常情况下, 操作属性节点…

Javascript之DOM的三大节点及部分用法

DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型节点类型 nodeType属性值元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操作. 元素节点:html中的标签. 属性节点:html便签中的属性值. 文本节点:元素节点之间的文本. 二.用body的childNodes来测试 <body>/*第一个文本元素 */<div></div>/*第二个文本元素 */<div></div>…

DOM中元素节点、属性节点、文本节点的理解13.3

节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型节点类型元素(ELEMENT_NODE) 1 属性(ATTRIBUTE_NODE) 2 文本(TEXT_NODE) 3 注释(COMMENT_NODE) 8 文档(DOCUMENT_NODE) 9 在实际应用中,经常用到的就是元素节点.属性节点和文本…

DOM中元素节点，属性节点，文本节点的理解

节点信息每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型节点类型元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文本节点了,下面我们通过小段代码进行讲解 1:元素节点 <HEAD> <TITLE>空谷悠悠</TITLE> <…

javascript之DOM编程通过html元素的标签属性找节点

JavaScript的DOM编程--10--删除节点

1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节点将同时被删除. 如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙. <!DOCTYPE html> <html lang="en"> <he…

JavaScript的DOM编程--05--获取文本节点

获取文本节点: 1). 步骤: 元素节点 --> 获取元素节点的子节点 2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值 <html> <head&g…

JavaScript的DOM编程--04--获取元素节点的子节点

获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取. 2). firstChild 属性获取第一个子节点 3). lastChild 属性获取最后一个子节点 <html> <head> <meta http-equiv="Content-Type" co…

JavaScript的DOM编程--11--插入节点

插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,targetNode); 节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点. <!DOCTYPE html> <html lang="en">…

javascript之DOM编程根据属性找标签练习

首先看一下需求: 当点击全选时,选中所有的,当再点击时,全部取消.且选中某些项,点击总金额,会显示处总的金钱数. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&…

JavaScript中DOM的层次节点(一)

DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加.修改.删除节点的一部分. DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点类型,每种都拥有自己的特点.数据和方法,并且和其他节点存在着某种关系. html元素称为文档元素,所有的元素都包含在文档元素中,并且每个文档只有一个html元素. 1 Node类型 DOM1级定义了Node接口,该接口由DOM中的所有节点类型实现.这个接口在JavaScript中是作为Node类型实…

JavaScript的DOM编程--01--js代码的写入位置

DOM:Document Object Model(文本对象模型) D:文档 – html 文档或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(html)的基于树的API DOM树:节点(node)的层次. DOM 把一个文档表示为一棵家谱树(父,子,兄弟) DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面节点及其类型: 例1 <html> <head> <meta http-equiv="…

高性能JavaScript（DOM编程）

首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访问与修改访问DOM元素是有代价的,修改元素代价更是昂贵,因为它会导致浏览器重新计算页面的几何变化(重排和重绘). 尤其是在循环中访问或者修改元素,看下面两段代码: var times = 15000; console.time(1); for(var i = 0; i < times; i++)…

JavaScript HTML DOM 元素（节点）

添加和删除节点(HTML 元素) 创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 例如:这段代码创建新的 <p> 元素: var para=document.createElement("p"); 如需向 <p> 元素添加文本,您必须首先创建文本节点.这段代码创建了一个文本节点: var node=document.createTextNode("这是新段落.&qu…

JavaScript的DOM编程--09--节点的替换

节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild); 返回值是一个指向已被替换的那个子节点的引用指针 2). 该节点除了替换功能以外还有移动的功能. 3). 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数: /** * 互换 aNode 和 bNode * @param {Object} aNode * @param…