HTML DOM介绍

  HTML DOM定义了一系列的对象,以及访问和处理HTML的方法。通过DOM可以浏览所有的HTML元素,不但可以修改或者删除元素的文本和属性,而且可以创建新的元素。

  一.首先对一个元素进行操作前,要得到要操作的元素,有三种方法得到元素:

  1.通过id名,getElementById(id)

  2.通过TagName,getElementByTagName(tagname)

  3.通过ClassName,getElementByClassName(classname)

  或者用jQuery方法来的到元素更加容易

  1.通过id名,$("#text")得到id="text"的元素

  2.通过TagName,$("p")得到所有的<p>元素

  3.通过ClassName,$(".text")得到class="text"的所有元素

  4.$(this)表示当前的HTML元素

  二.得到元素后就可以进行操作了

    1.属性innerHTML获得或设置元素文本内容

    2.改变样式:如将id="text‘的元素颜色改为红色

     var x=document.getElementById("#text");x.style.color="red";

    3.创建新的元素:如创建一个<p>标签,内容为“this is a new p",再将新建的元素放置在id="text”元素后

      var x=document.creatElement("p");

     var content=document.createTextNode("this is a new");

     x.appendChild(content);

     var y=document.getElementById("text");

     y.appendChild(x);

     jQuery方法操作

     1.属性:text()获得或设置元素文本

         html()获得或设置包含html标签的文本

         val()获得或设置表单的内容

         attr()h获得或设置属性

     2.样式:css()获得或设置CSS属性

     3.创建元素:如创建一个<p>标签,内容为“this is a new p",再将新建的元素放置在id="text”元素后

      $("#text").append("<p>this is a new p</p>");

  三.常见事件

    onclick 单击

    onload 加载页面

    onchange 改变输入字段的内容时触发

    onmouseover 鼠标移动到事件

    onmouseout 鼠标移出事件

    onmouseup 鼠标松开事件

    onmousedown 鼠标按下事件

    

时间: 2024-07-31 18:24:42

HTML DOM介绍的相关文章

关于DOM的事件操作/DOM介绍/关于DOM操作的相关案例

一.关于DOM的事件操作 1.JavaScript基础分为三个部分: ECMAScript: JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句 DOM: 文档对象模型, 操作网页上的元素的API, 比如让盒子移动, 变色,  轮播图等.. BOM: 浏览器对象模型, 操作浏览器部分功能的API, 比如让浏览器自动滚动 2.事件 JS是以事件驱动为核心的一门语言 3.事件的三要素 (1).事件的三要素: 事件源, 事件, 事件驱动程序 (2).总结: 事件源:

虚拟DOM介绍

[转自]:https://www.jianshu.com/p/616999666920 为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,一图胜千言: 所有浏览器的引擎工作流程都差不多,如上图大致分5步:创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting 第一步,用HTML分析器,分析HTML元素,构建一颗DO

DOM介绍以及使用方法

DOM的基本讲解 一.DOM (Document Object Model)文档对象模型 1.有属性有方法 1 var person = { 2 name:'派大星', 3 fav:function(){ 4 } 5 } 2.js中对象分类三种 (1)用户定义对象 (2)内建对象 Array Date Math (内置) (3)宿主对象 3.Model Map(地图) (1)把 DOM 看做一颗“树” (2)DOM 把文档看做一颗“家谱树” 1 parent child sibling(兄弟姊妹

JavaScript DOM介绍

DOM 概念 所谓DOM,全称 Docuemnt Object Model 文档对象模型,毫无疑问,此时要操作对象,什么对象?文档对象 在文档中一切皆对象,比如html,body,div,p等等都看做对象,那么我们如何来点击某个盒子让它变色呢? DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. 解析过程 HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,getElementById是获取内中DOM上

JavaScript入门学习之四——DOM介绍及常用方法

在前面我们学习了JavaScript的基本语法,紧靠这些代码我们还无法实现浏览器的交互.也就是说我们还不能做出来平时常见到的网页交互.下面就需要引入一个新的知识点,也就是这一章要讲的:DOM. BOM——Browser Object Module,是指浏览器对象模型.通过这个模型可以实现JavaScript和浏览器之间的对话,包括后面要学习的DOM,可以访问Html中的所有文档中的元素. window对象 所有的浏览器都支持window对象,他表示浏览器窗口.所有的JavaScript全局对象,

DOM介绍

原文地址:https://www.cnblogs.com/zhao-ting/p/9709163.html

Aspose.Words组件介绍及使用—基本介绍与DOM概述

1.基本介绍 Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XPS,EPUB和其他格式.使用Aspose.Words可以在不使用Microsoft.Word的情况下生成.修改.转换和打印文档.在项目中使用Aspose.Words可以有以下好处. 1.1丰富的功能集 其丰富的功能特性主要有以下4个方面: 1)格式转换.Aspose.Words具有高质量的文件格式转

C#操作Word Aspose.Words组件介绍及使用—基本介绍与DOM概述

1.基本介绍 Aspose.Words是一个商业.NET类库,可以使得应用程序处理大量的文件任务.Aspose.Words支持Doc,Docx,RTF,HTML,OpenDocument,PDF,XPS,EPUB和其他格式.使用Aspose.Words可以在不使用Microsoft.Word的情况下生成.修改.转换和打印文档.在项目中使用Aspose.Words可以有以下好处. 1.1丰富的功能集 其丰富的功能特性主要有以下4个方面: 1)格式转换.Aspose.Words具有高质量的文件格式转

DOM系列---基础篇

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