dom对象 | 易学教程

JavaScript之DOM文档对象模型--对HTML元素的访问操作

阅读更多关于 JavaScript之DOM文档对象模型--对HTML元素的访问操作

1、DOM是文档对象模型（Document Object Model）的简称。当网页加载时，可以将结构化文档在内存中转换成对象树。简单的说，DOM并不是一种技术，而是一种访问结构化文档的思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。 2、DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：（1）元素节点：各种标签就是这些元素节点的名称，如<ul>、<p>等；（2）文本节点：文本节点总是被包含在元素节点的内部；（3）属性节点：一般用来修饰元素节点的就称之为属性节点。 3、DOM对HTML元素的访问操作：为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：（1）根据ID访问HTML元素--通过document对象调用getElementById（）方法来查找具有唯一id属性值的元素；如下例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="name" content="content"> <title>DOM-使用getElementById方法查找元素</title> <script type="text/javascript"> function

DOM

阅读更多关于 DOM

DOM（Document Object Model）：结点的概念：整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。结点类型 1.元素结点 2.属性结点 3.文本结点结点的注意点： 1.文本节点和属性结点都看作元素结点的子结点 2.我们一般所说的结点指的就是元素结点，将html标签看作是一个对象，并用“结点”称呼它 3.结点的关系有：父子关系、兄弟关系 1.获取元素结点 1)直接获取 ① document.getElementById() ② document.getElementsByName() ③ document.getElementsByTagName() 2)间接获取父子关系 firstChild lastChild childNodes 子父关系 parentNode 兄弟关系 nextSibling previousSibling 2.操作属性结点 1)通过对象“.”属性，来操作属性优：可以动态获取用户修改的属性值缺：不能获取自定义属性的值 2)getAttribute("key") setAttribute("key","value") removeAttribute("key") 优：可以获取自定义属性的值缺：不能动态获取用户修改的属性值 3.处理文本结点 1) 通过对象.innerText 获取标签内部的文本信息 2) 通过对象

DOM应用

阅读更多关于 DOM应用

一、DOM是什么： 1、 DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 2、Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。 3、Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。 4、Mdel（模型）：代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个相互连接的节点。 DOM是访问和操作Web页面的接口，使用该接口可以访问页面中的其他标准组件。二、DOM分层： 1、根节点：在最顶层的<html>节点，称为根节点 2、父节点：一个节点之上的节点是该节点的父节点（parent） 3、子节点：一个节点之下的节点是该节点的子节点（child） 4、兄弟节点：如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点（sibling） 5、后代：一个节点的子节点的结合可以称为是节点的后代（descendant） 6、叶子节点：在树型结构最底部的节点 7、元素节点：在html中，<body>、<p>、<a>等一系列标记

Web API 中 Dom的概念 1.获取元素 2. 事件 3.操作元素的对象属性

阅读更多关于 Web API 中 Dom的概念 1.获取元素 2. 事件 3.操作元素的对象属性

一、web API的介绍（1）Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。（2）API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。（3）Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。（4）Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）。（5）API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数。二、DOM的概念（1） document object model 文档对象模型（2）作用：用来操作页面元素三、查询元素（获取元素）（1）根据 id 获取元素对象： document .getElementByld （id名称）；（2）根据标签获取元素对象的集合： document . getElementByTagName （标签名）；　　div.getElementByTagName（）；（3）根据类名获取元素对象的集合：document.getElementsByClassName（类名）；（4）根据 name属性来获取对象的集合：document.getElementsByName（）；（5）根据

juqery学习笔记（二）DOM操作

阅读更多关于 juqery学习笔记（二）DOM操作

一、添加节点 $(selector).append() 向selector选择的元素的里面插入参数参数所指定的dom元素，插入的位置在最后面。参数可以是直接的HTML字符串，也可以是由$()函数创建的DOM元素如：$(selector).append(“<b>你好</b>”); 或 $dom=$(“<b>你好</b>”); $(selector).append($dom); $(HTML).appendTo(selector) 向selector选择的元素里面插入$(HTML)创建的DOM元素，插入的位置在最后面 $(selector).prepend() 向selector选择的元素的里面插入参数参数所指定的dom元素，插入的位置在最前面。参数可以是直接的HTML字符串，也可以是由$()函数创建的DOM元素如：$(selector).prepend(“<b>你好</b>”); 或 $dom=$(“<b>你好</b>”); $(selector).prepend($dom); $(HTML).prependTo(selector) 向selector选择的元素里面插入$(HTML)创建的DOM元素，插入的位置在最前面 $(selector).after() 在selector选择的元素后面（而不是里面）插入参数所指定的dom元素，参数可以是直接的HTML字符串，也可以是由$(

前端基础 jQuery

阅读更多关于前端基础 jQuery

一 jQuery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。二什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : jquery对象和DOM对象 1、jQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。 var $cr = $("#cr"); //jQuery对象 var cr = $cr[0] //DOM对象 alert(cr

大白话简谈虚拟DOM

阅读更多关于大白话简谈虚拟DOM

　　先说下真实的DOM：我们学习的原生js和jquery都是通过操作真实的DOM进行页面功能和是数据渲染的实现。例如: 　　原生js中会有 <script> //通过ID获取（getElementById） //通过name属性（getElementsByName） //通过标签名（getElementsByTagName） //通过类名（getElementsByClassName） //通过选择器获取一个元素（querySelector） //通过选择器获取一组元素（querySelectorAll） //获取html的方法（document.documentElement） //document.documentElement是专门获取html这个标签的 //获取body的方法（document.body） //document.body是专门获取body这个标签的。 </script> 　　　Jquery中有 <script> //append(): 向每个匹配的元素内部追加内容. //　　appendTo(): 将所有匹配的元素追加到指定的元素中 //　　prepend(): 向每个匹配的元素内部前置内容. //　　prependTo(): 将所有匹配的元素前置到指定的元素中　 //　　after(): 在每个匹配的元素之后插入内容. //　　insertAfter

第三篇 jQuery操作DOM

阅读更多关于第三篇 jQuery操作DOM

3-1 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM 树状文档</title> <style type="text/css"> body{ font-size:13px;} table,div,p,ul{ width:280px; border:solid 1px #666; margin:10px 0px 10px 0px; padding:0px; background-color:#eee;} </style> </head> <body> <table> <tr><td>TD1</td></tr> <tr><td>TD2</td></tr> </table> <div>Div</div> <p>P</p> <div><span>Span</span></div> <ul> <li>Li1</li> <li

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

阅读更多关于从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id, src, alt等叫做这个元素的"属性". 我将其称为"元素属性". 但是在解析成DOM对象时, 实际浏览器最后会将标签元素解析成"DOM对象", 并且将元素的"元素属性"存储为"DOM属性". 两者是有区别的. 虽然我们设置了元素的src是相对路径:images/image.1.jpg 但是在"DOM属性"中都会转换成绝对路径: http://localhost/images/image.1.jpg . 甚至有些"元素属性"和"DOM属性"的名称都不一样,比如上面的元素属性class, 转换为DOM属性后对应className. 牢记, 在javascript中我们可以直接获取或设置"DOM属性": <script type="text

原生JS DOM对象与jQuery对象的区别、联系、相互转换

阅读更多关于原生JS DOM对象与jQuery对象的区别、联系、相互转换

大家好!我们之前讲了一些关于原生JS的一些操作,今天我们来讲一下原生JS DOM对象与jQuery对象的区别、联系、相互转换. Dom原生对象和jQuery对象的区别: jQuery选择器得到的jQuery对象和标准的js中的document.getElementById()取得的dom对象是两种不同类型,两者不等价 . 注:js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合.所以说他们两者是不同的对象类型不等价. jQuery无法使用DOM对象的任何方法,同理Dom对象也不能使用jQuery里的方法.乱使用会报错. 例: $("#id").html(); document.getElementById("id").innerHTML; 意思是指:获取ID名为id的元素内的html代码.这两段代码结果相同,中间的取值过程不同. 即:$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的. 注:jQuery是从js衍生出来的,师处同源,但是jQuery是经过一系列操作之后,将其封装成了一个个不同的方法,学习jQuery开始就应当树立正确的观念,之后学习jQuery就会轻松很多的. js-dom对象和jQuery对象相互转换:

订阅 dom对象