JavaScript四（DOM编程）

【JavaScript四（DOM编程）】的更多相关文章

HTML、css、javascript、DOM编程

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

高性能Javascript(2) DOM编程

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

高性能JavaScript之DOM编程

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

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编程--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编程改变CSS样式（简易验证码显示）

<!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…

高性能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的DOM编程--11--插入节点

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

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

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

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

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

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编程--07--节点的属性

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

JavaScript的DOM编程--06--两个实验

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //点击每个 li 节点,…

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编程--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编程--02--获取元素节点

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

javascript之DOM编程正则表达式引入

在javascript中,正则表达式和java中区别不大.只有一小部分不同的地方: <!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"> <h…

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=&q…

javascript之DOM编程增加附件

在开始这个案例之前,需要学习一下有关于根据子关系节点获取标签的几个方法.罗列如下 /*通过关系(父子关系.兄弟关系)找标签.parentNode 获取当前元素的父节点.childNodes 获取当前元素的所有下一级子元素.firstChild 获取当前节点的第一个子节点.lastChild 获取当前节点的最后一个子节点. ------------------------------------------------------------ nextSibling 获取当前节点的下一个节点.(兄…

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…

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编程通过html元素的标签属性找节点

<!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…

JavaScript DOM编程艺术第一章：JavaScript简史

本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap…

读书笔记：JavaScript DOM 编程艺术（第二版）

读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…

JavaScript性能优化 DOM编程

最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML和HTML文档的程序接口(API). 浏览器通常会把DOM和JavaScript独立实现.例如Chrome中使用Webkit的WebCore库渲染页面,用V8作为JavaScript引擎. 访问DOM天生就慢,将DOM和JavaScript比喻为两个岛屿,两处同行要收过桥费,ECMAScript访问DOM的次…

第四章 JavaScript操作DOM对象

第四章 JavaScript操作DOM对象一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级的DOM规范,这个规范允许和操作HTML页面中的每个单独的元素,如网页的表格.图片.文本.表单元素等. 1. DOM操作分类使用JavaScript操作DOM时分为三个方面:DOM Core(核心).HTML-DOM和CSS-DOM. 1. DOM Core 使用DOM Core不是…

《JavaScript Dom 编程艺术》读书笔记-第4章

我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本是因为这本书从实例开始带领读者一步步学习,写作风格也如其名字一样具有艺术感,阅读起来很舒服.本书第一二三稍微有计算机基础的人阅读起来都不困难,也没有什么好记录的,从第四章开始,本书开始介绍案例图片库~每一节都是干货满满滴~ 第四章——案例研究:JavaScript图片库: 4.1 标记无序清单元素<u…

Javascript DOM 编程艺术（第二版）读书笔记——基本语法

Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一部分东西的概念在初学时是无法完全弄懂的,很多时候都是学到很多东西后,串起来才能更进一步.而我的博客目地是自学与交流,所以我只能是暂时地用红字标注这些东西,以后弄懂了会补全这些(相应的,有些东西会删除).所以虽然说是某本书的读书笔记,但是写到后面绝对是不仅仅是局限于这本书了.所以不要指望着只看读书笔记…

轻松学习JavaScript十八：DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是…