学习前端的都会了解到一些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. Java中Properties类

    1 简介: JDK提供的java.util.Properties类继承自Hashtable类并且实现了Map接口,用map来存储key-value数据,所以存入的数据是无序的.其中键和值都是字符串类型 ...

  2. c# post basic 接口

    string url = "http://xxxxxxxxx";//地址,请反复检查地址的准确性 string usernamePassword = "username: ...

  3. 如何应对苹果app 的ipv6 时代?腾讯专家教您进行环境改造

    WeTest 导读 WWDC2015苹果宣布在ios9支持纯IPv6的网络服务,并且要求2016年提交到app store的应用必须兼容纯IPv6的网络,要求适配的系统版本是ios9以上(包括ios9 ...

  4. 移动Web开发小结

    以下是做移动端Web开发过程中小结的几个事项:希望能够帮助到大家,同时也方便自己查看: 1,在移动开发页面中,主体盒子的max-width与min-width的设置原因: ①设置max-width是为 ...

  5. java web 导出Excel 的工具类公用实现

    平时我们在开发后端管理的系统时,经常会出现导出Excel的功能.这个功能很简单,但是呢,我一般就会使用公用的工具类,在一个Util中,暴露公用导出的接口,只需要传入需要导出的数据(一般使用list集合 ...

  6. ztree实现权限功能(横向显示)

    最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示.开始在网上找的解决方案是用css样式把最后一层的display设置为inline.在我本地电脑上看了下.效果不 ...

  7. 从.Net版本演变看String和StringBuild性能之争

    在C#中string关键字的映射实际上指向.NET基类System.String.System.String是一个功能非常强大且用途非常广泛的基类,所以我们在用C#string的时候实际就是在用.NE ...

  8. Net分布式系统之六:微服务之API网关

    本人建立了个人技术.工作经验的分享微信号,计划后续公众号同步更新分享,比在此更多具体.欢迎有兴趣的同学一起加入相互学习.基于上篇微服务架构分享,今天分享其中一个重要的基础组件“API网关”. 一.引言 ...

  9. 关于JS的return false

    之前真的不知道JS里的return false 还能跳出事件. 今天在修改BUG的时候,用到了这个,就去查了一下,为了加深记忆在此处做个总结. retrun true: 返回正确的处理结果. retu ...

  10. Github 开源:升讯威 Winform 开源控件库( Sheng.Winform.Controls)

    Github 地址:https://github.com/iccb1013/Sheng.Winform.Controls 本控件库中的代码大约写于10年前(2007年左右),难免有不成熟与欠考虑之处, ...