学习前端的都会了解到一些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 元素(节点)均可被修改,也可以创建或删除节点。

   怎样添加、移除、移动、复制、创建和查找节点。 

      创建新节点:

             createDocumentFragment() //创建一个DOM片段

          createElement() //创建一个具体的元素

          createTextNode() //创建一个文本

     添加、移除、替换、插入:

          appendChild()

          removeChild()

          replaceChild()

          insertBefore()

       查找:

          getElementsByTagName() //通过标签名称

          getElementsByName() //通过元素的Name属性的值

          getElementById() //通过元素Id,唯一性

          getElementsByClassName()//通过class找

          getElementsByClassName()//通过class找

       事件

      (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

      (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。

      (3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。

      常用事件:

           Onclick:点击事件

         Ondbclick:双击事件

         Onmousedown:鼠标点击

         Onmouseup;当鼠标按下时抬起;

         Onmousmove;鼠标移动;

         Onmousover;鼠标移过;

         Onmousout;鼠标离开

         Onload:文档加载完毕

         Windon.onload=function(){}



有关Dom的一些操作的更多相关文章

  1. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...

  2. 基础DOM和CSS操作(三)

    CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...

  3. 基础DOM和CSS操作(二)

    元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...

  4. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  5. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  6. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  7. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

  8. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

  9. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  10. Dom的样式操作和属性操作

    如果说web的研究对象是html和css,那么整个dom结构,包含html树和dom树的dom结构才是研究对象,而在整个页面呈现上面,js起到的作用则是异步的用户行为. 按照上面整个思路,获取dom元 ...

随机推荐

  1. webService 下得 拦截

    当我们 对webservice 接口的 拦截 更具权限  来 判断 是否可以调用  一下是我的 一个demo 首先 我们写一个 拦截类 import javax.xml.soap.SOAPExcept ...

  2. 取消input默认样式

    有时候input在页面中被聚焦后会出现默认的边框样式,可以通过以下方法取消去除 .input:focus{ outline: none;}

  3. Android系统--输入系统(十一)Reader线程_简单处理

    Android系统--输入系统(十一)Reader线程_简单处理 1. 引入 Reader线程主要负责三件事情 获得输入事件 简单处理 上传给Dispatch线程 InputReader.cpp vo ...

  4. System.Data.SqlClient.SqlException (0x80131904): EXECUTE 后的事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配。上一计数 = 1,当前计数 = 0。 EXECUTE 后的事务计数指示 BEGIN 和 COMMIT 语句的数目不匹配。上一计数 = 1,当前计数 = 0。

    EF使用ExecuteSqlCommand(db.Database.ExecuteSqlCommand("exec proc_DeleteCaseInfo_Output @caseID&qu ...

  5. Asp.net mvc 小试牛刀一:多语言支持

    最近因为项目需要又从UWP开发转到了Asp.net mvc 开发,由于也不是什么老手,所以就将项目常见的一些技术问题记录一下自己的解决方案. 第一个需求:用户可以自由切换界面显示语言. 解决方案一:界 ...

  6. MySQL 的性能(上篇)—— SQL 执行时间分析

    简介 文中内容均为阅读前辈的文章所整理而来,参考文章已在最后全指明 本文分为上下两篇: 上篇:MySQL 的 SQL 执行时间分析 下篇:MySQL 性能优化 后端开发必然会接触到数据库,数据层的优劣 ...

  7. 升讯威微信营销系统开发实践:(5) Github 源码:微信接口的 .NET 封装。

    微信开发系列教程,将以一个实际的微信平台项目为案例,深入浅出的讲解微信开发.应用各环节的实现方案和技术细节. 本系列教程的最终目标是完成一个功能完善并达到高可用性能指标的微信管理软件,所以除了与微信本 ...

  8. 一个使用openGL渲染的炫丽Android动画库二(碎片化曲面动画)

    续一个使用openGL渲染的炫丽Android动画库 MagicSurfaceView v1.1.0发布, 新增碎片化曲面动画 地址:https://github.com/gplibs/android ...

  9. python之配置logging的几种方式

    作为开发者,我们可以通过以下3中方式来配置logging: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文 ...

  10. XML文件生成——借助JDOM

    import java.io.* ; import org.jdom.* ; import org.jdom.output.* ; public class DOMDemo { public stat ...