学习前端的都会了解到一些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. 【算法系列学习】状压dp [kuangbin带你飞]专题十二 基础DP1 D - Doing Homework

    https://vjudge.net/contest/68966#problem/D http://blog.csdn.net/u010489389/article/details/19218795 ...

  2. hdu1281二分图匹配

    小希和Gardon在玩一个游戏:对一个N*M的棋盘,在格子里放尽量多的一些国际象棋里面的"车",并且使得他们不能互相攻击,这当然很简单,但是Gardon限制了只有某些格子才可以放, ...

  3. Layout基本属性总结

    在Android中,共有五种布局方式,分别是:FrameLayout(框架布局),LinearLayout (线性布局),GridLayout(网格布局),RelativeLayout(相对布局),T ...

  4. C#集合之链表

    LinkedList<T>是一个双向链表,其元素会指向它前面和后面的元素.这样,通过移动到下一个元素可以正向遍历链表,通过移动到前一个元素可以反向遍历链表. 链表在存储元素时,不仅要存储元 ...

  5. python中从文件中读取数据

    # average5.py def main(): fileName = input("What file are the numbers in?") infile = open( ...

  6. 通过BitSet完成对单词使用字母的统计

    什么是BitSet BitSet类实现了一组位或标记(flag),这些位可被分别设置或清除.当需要跟踪一组布尔值时,这种类很有用. 您只需让每一位对应一个值,并根据需要设置或清除即可. 标记(flag ...

  7. Tomcat--安装与部署(一)

    一.Tomcat背景 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group在完成GNUJSP1.0的开发以后,开始考虑在SUN的JSWDK基础上开发一个可以直接提供Web服务的JS ...

  8. 省市区三级联动(jquery+ajax)(封装和不封装两种方式)-----2017-05-15

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  9. 点击文字选中checkbox

    <html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...

  10. 《Android进阶》之第六篇 Fragment 的使用2

    最近通过学习,对fragment的使用有了新的认识. 一开始接触android的时候,很是受不了这个fragment,总感觉它把一个简单的事情搞复杂啦,所以每次新建工程的时候总是固执的选择empty ...