dom

阅读更多关于 DOM

1、简介 DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。 HTML DOM 定义了访问和操作 HTML 文档的标准方法。 DOM 以树结构表达 HTML 文档。 2、节点在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节节点树中的节点彼此拥有层级关系。我们常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。 3、方法 HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。 HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。一些常用的 HTML DOM 方法： getElementsByClassName -- 返回带有指定classname的元素 getElementById() -- 返回带有指定 ID 的元素。 getElementsByTagName() -- 返回包含带有指定标签名称的所有元素的节点列表（集合

JavaScript与DOM(下)

阅读更多关于 JavaScript与DOM(下)

上一章我们介绍了 JavaScript 的基本内容和 DOM 对象的各个方面，包括如何访问 node 节点。本章我们将讲解如何通过 DOM 操作元素并且讨论浏览器事件模型。操作元素上一章节我们提到了 DOM 节点集合或单个节点的访问步骤，每个 DOM 节点都包括一个属性集合，大多数的属性都提供为相应的功能提供了抽象。例如，如果有一个带有 ID 属性 intro 的文本元素，你可以很容易地通过 DOM API 来改变该元素的颜色： document.getElementById('intro').style.color = '#FF0000'; 为了理解这个 API 的功能，我们一步一步分开来看就非常容易理解了： var myDocument = document; var myIntro = myDocument.getElementById('intro'); var myIntroStyles = myIntro.style; // 现在，我们可以设置颜色了: myIntroStyles.color = '#FF0000'; 现在，我们有了该文本的 style 对象的引用了，所以我们可以添加其它的 CSS 样式： myIntroStyles.padding = '2px 3px 0 3px'; myIntroStyles.backgroundColor = '#FFF';

DOM节点例子

阅读更多关于 DOM节点例子

elementNode.setAttribute(name,value) 1.name: 要设置的属性名。 2.value: 要设置的属性值。 elementNode.getAttribute(name) 1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。 2. name：要想查询的元素节点的属性名字元素节点：构成了DOM的基础。文档结构中，<html>是根元素，代表整个文档，其他的还有<head>,<body>,<p>,<span>等等。元素节点之间可以相互包含(当然遵循一定的规则) 文本节点：包含在元素节点中。属性节点：元素都可以包含一些属性，属性的作用是对元素做出更具体的描述，比如id,name之类的。 nodeName 属性 nodeName 属性规定节点的名称。 nodeName 是只读的元素节点的 nodeName 与标签名相同属性节点的 nodeName 与属性名相同文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document 注释：nodeName 始终包含 HTML 元素的大写字母标签名。 nodeValue 属性 nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或

JavaScript&HTML DOM

阅读更多关于 JavaScript&HTML DOM

1、JavaScript介绍 Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。 JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。 JS是弱类型，Java是强类型。 java的情况类型变量名 = 指定类型的值。 int i = 整型 js的情况 var 变量名 = 任意值。这个变量的类型是由你具体赋的值来决定。而且这个变量的类型会随着赋值而发生改变。后面我们所有指到的js 就是javaScript 特点：交互性（它可以做的就是信息的动态交互）安全性（不允许直接访问本地硬盘）跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关） 2、数组定义方式 Js 中数组的定义：格式： var 数组名 = []; // 定义一个空的数组 var 数组名 = [12,”abc”,true]; // 定义数组的同时初始化数组元素 3、函数的三种定义方式第一种定义函数的方式，使用function关键字，定义一个函数。格式如下： function 函数名（参数列表）{ 函数体 } 如何定义一个带有返回值的函数。只需要在函数体内直接使用reutrn语句返回值即可。函数的第二种定义方式（很少使用，了解即可） var 函数名

有关Dom的一些操作

阅读更多关于有关Dom的一些操作

　　　学习前端的都会了解到一些Dom操作，让我们来看看Dom操作有哪些吧! 　　　　　　DOM(即 Document Object Mode) 是 W3C（万维网联盟）的标准。　　DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” 　　W3C DOM 标准被分为 3 个不同的部分：　核心 DOM - 针对任何结构化文档的标准模型　XML DOM - 针对 XML 文档的标准模型　HTML DOM - 针对 HTML 文档的标准模型　　　　其中，在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。　　根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：　整个文档是一个文档节点　每个 HTML 元素是元素节点　HTML 元素内的文本是文本节点　每个 HTML 属性是属性节点　注释是注释节点　　　　　　 HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。　　　怎样添加、移除、移动、复制、创建和查找节点。　　　　

Javascript学习笔记2.1 Javascript与DOM简介

阅读更多关于 Javascript学习笔记2.1 Javascript与DOM简介

DOM（文档对象模型）简介 DOM（文档对象模型）针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构，它是中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。 Javascript通常都是用来进行DOM操作和交互的。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。以下讨论的是HTML DOM。每一个网页元素（一个HTML标签）被看做一个对象。文档对象模型通常被理解成一棵树的形状。树根是document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话

JavaScript与DOM（上）

阅读更多关于 JavaScript与DOM（上）

本来像自己写一篇的。。。结果看到了Tom uncle的这篇。。总结的确实很赞，其他文章也非常好推荐转载自：http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 文档对象模型Document Object Model DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API。Javascript和DOM一般经常作为一个整体，因为Javascript通常都是用来进行DOM操作和交互的。主要内容来自：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/ 关于DOM，有些知识需要注意： 1. window对象作为全局对象，也就是说你可以通过window来访问全局对象。属性在对象下面以变量的形式存放，在页面上创建的所有全局对象都会变成window对象的属性。方法在对象下面以函数的形式存放，因为左右的函数都存放在window对象下面，所以他们也可以称为方法。 2. DOM为web文档创建带有层级的结果，这些层级是通过node节点组成，这里有几种DOM node类型，最重要的是Element, Text, Document。

js获取节点 dom操作

阅读更多关于 js获取节点 dom操作

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素原生的JS获取ID为test的元素下的子元素。可以用：比如： <div id="dom"> <div></div> <div></div> <div></div> </div> var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); 这样是没有问题的此时a.length=3；但是我们现在换一种方法获取就是我上章提到的var b = document.getElementByIdx_x("dom").childNodes;如果这样alert(b.length)IE浏览器上没问题还是3，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的 function del_space(elem){ var elem_child = elem.childNodes;//得到参数元素的所有子元素 for(var i=0;i<elem_child.length;i++){ /

JS基础篇--HTML DOM classList 属性

阅读更多关于 JS基础篇--HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。添加类（add） document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); 移除类(remove) 使用remove方法，你可以删除单个CSS类： document.getElementById("myDIV").classList.remove("mystyle"); 移除多个类： document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass"); 切换类(toggle) 这个方法的作用就是，当myDiv元素上没有这个CSS类时，它就新增这个CSS类；如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。 document.getElementById("myDIV").classList

jquery(1)-DOM jquery

阅读更多关于 jquery(1)-DOM jquery

<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=GB2312"/> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function () { var $cr = $("#cr"); var cr = $cr.get(0); $cr.click(function(){ if(cr.checked){ alert("感谢你的支持!你可以继续操作！"); } }); }); </script> </head> <body> <input type="checkbox" id="cr

订阅 dom