理解js的DOM操作

1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
document.documentElement     返回文档的根节点<html> 
document.body     <body> 
document.activeElement 返回当前文档中被击活的标签节点(ie) 
event.fromElement        返回鼠标移出的源节点(ie) 
event.toElement       返回鼠标移入的源节点(ie) 
event.srcElement     返回激活事件的源节点(ie) 
event.target         返回激活事件的源节点(firefox) 
当前对象为node 
返回父节点:node.parentNode, node.parendElement, 
返回所有子节点:node.childNodes(包含文本节点及标签节点),node.children 
返回第一个子节点:node.firstChild 
返回最后一个子节点: node.lastChild 
返回同属上一个子节点:node.nextSibling 
返回同属下一个子节点:node.previousSibling 
parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持 ,所以大家只要记得有parentElement和children就行了

2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
(1)创建新节点
      createDocumentFragment()    //创建一个DOM片段
      createElement()   //创建一个具体的元素
      createTextNode()   //创建一个文本节点
(2)添加、移除、替换、插入
      appendChild()
      removeChild()
      replaceChild()
      insertBefore()
(3)查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()    //通过元素的Name属性的值
      getElementById()    //通过元素Id,唯一性

3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
  IE 5.5: div -> body -> document
  IE 6.0: div -> body -> html -> document
  Mozilla 1.0: div -> body -> html -> document -> window
(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。
(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。
  DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

时间: 2024-08-24 11:06:52

理解js的DOM操作的相关文章

js常用dom操作

利用dom获得页面元素节点 a) document.getElementById()    //id获得元素节点对象 b) document.getElementsByTagName()   //html标签获得元素节点对象(数组) c) document.getElementsByName(); //常用于表单(数组) 属性判断当前节点类型nodeType a)        1  元素节点 b)        2  属性节点 c)        3  文本节点 d)        9  文档

JS的DOM操作及动画

JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model 找到元素:var a=document.getElementById("id") :就找到的元素放在变量中:                id选择器:document.getElementById("id"): 根据id找,最多找一个:                class选择器:document.getElementClassName(

【2017-3-29】js语法 DOM操作

(一)Js简单介绍 1. 进行数据运算   控制浏览器的一些功能   控制元素(属性,样式,内容) 2. Js的引用位置: 内联Js  -  可以仿放在html文件的任意位置,推荐放在html的外面,页面的最底部 外部Js  -  将Js代码写到一个以Js结尾的文件中去,在将这个文件引用到html文件中去 内嵌Js (二)Js内容 1.基本数据类型: 字符串     var a = 'aaaa';  --  单引号,双引号都可以   小数       var a = 1.2; 整数      

5月16日上课笔记-js中DOM操作

一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文本节点 nodeType 节点类型: 1:元素节点 3:文本节点 9:document节点 2:属性节点 firstChild(支持IE浏览器) || firstElementChild(支持谷歌浏览器) //获取第一个子节点 var fc = ulDom.firstElementChild ||

事件冒泡及事件委托的理解(JQuery Dom操作)

jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会触发事件,只是没有结果,事件冒泡传递还是会发生 系统自动产生的event事件对象 function传的第一个参数就是event事件对象 1 event.stopPropagation(); // 阻止事件冒泡 2 event.preventDefault() // 阻止默认行为 比如submit阻止

关于JS的DOM操作——重要实例的操作

1.复选框与按钮的配合使用的DOM操作 <body>                <input type="checkbox" id="ckb1" /><br><br>        <input type="button" value="下一步" id="btn1" disabled="disabled" /> </b

JS中Dom操作的常用案例实现

本文介绍几个Dom操作的几个常用的案例.虽然现在各种web框架层出不穷,也很方便.但是了解最基本的实现方法对我们开发还是有很大的帮助的: 1.图片滚动案例 1.1  效果如下: 1.2  代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .

js之DOM操作总结

1.什么是DOM,简单的说,DOM是一套对文档的内容进行抽象和概念化的方法.------------------<JavaScript DOM编程艺术> D:document,即文档 O:object,即对象 M:model,即模型 DOM把一份文档表示为一棵树,或者更具体来说就是一颗家谱树,这棵树由各种类型的节点构成. DOM节点可以分成三种:元素节点,文本节点,属性节点. 所以DOM操作主要是对这三种节点进行操作,操作的类型无非就是对节点进行增删改查. 查: 首先是获取节点: getEle

JS中DOM操作

DOM创建 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口). DOM描绘了一个层次化的节点树,允许开发人员添加,移动,删除和修改页面的某一部分. DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正的跨平台,语言中立的方式. 注意: IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的DOM对象与原声JavaScript对象的行为或活动特点不一致 节点操作: 插入节点: appendChi