javascript中的DOM对象的辨析

  1. ownerDocument表示当前的document对象
    var childElem = document.getElementById(‘testid‘);
    if(childElem.ownerDocument()==document)
    {
        alert(‘ownerDocument is document dom object‘);
    }

2.documentElement 表示当前的根节点html

if(document.documentElement.tagName==‘HTML‘)
{
    alert(‘document.documentElement is html dom obj‘);
}

3.srcElement表示事件触发的直接对象

在js中通常要判断被点击的标签是不是直接触发者,这种方式也是防止事件冒泡的一种有效方式

childElem.onclick = function(evt){
	var e = evt || window.event;
	e.target = typeof(e.target)==‘undefined‘?e.srcElement:e.target; //兼容性调整

	if(e.target.tagName==this.tagName){
		//dosomething()
	  }
}

4.document.all获取所有节点

if(!(!!document.all.item))  //某些浏览器不支持item(i),需要我们来重新定义一下
{
  document.all.item = function(i){
      return document.all[i];
  }
}

5.htmlDOMDocument获取

if(!(!!document.all.item))
{
  document.all.item = function(i){
      return document.all[i];
  }
}
document.documentElement; 
document.all.item(0);
document.getElementsByTagName(‘html‘).item(0);

6.childNodes,children,parentNode,parentElement通常浏览器支持childNodes和parentNode

//无代码

7.document.body,document.title,document.forms都是集合

//无代码

8.document可以根据form name属性 表达直接操作form以及form中的input标签

document.myform.username.type=‘text‘;

document[‘myform‘][‘username‘].type=‘text‘;

document.forms[‘myform‘].username; 
//这里有些奇怪,按理来说html中name可以相同,但这里只获取第一个name=myform的表单

9.document.defaultView.getComputedStyle 与window.getComputedStyle等价,用于获取currentStyle

var alpha = null;

if(navigator.userAgent.toLowerCase().indexOf(‘msie‘) != -1)
{
    alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?
    (parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + ‘‘:‘100‘;
}else{
    alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)[‘opacity‘];
}

以上做法比较特殊,因为浏览器差异性导致

下面是通常做法

var    CStyle=document.defaultView?
        document.defaultView.getComputedStyle(element,null):
        element.currentStyle;

try doing it;

时间: 2024-12-26 12:35:46

javascript中的DOM对象的辨析的相关文章

在OCX初始化时获取其在网页中的DOM对象

OCX初始化的时候会调用SetClientSite,会传入IOleClientSite对象. 1 CComQIPtr<IOleControlSite, &IID_IOleControlSite> spSite(pClientSite); 2 CComDispatchDriver ecDisp; 3 spSite->GetExtendedControl(&ecDisp); 如上代码,根据IOleClientSite对象,我们可以得到IOleControlSite对象:再通过

JavaScript中的事件对象

JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息.下面将会讲到DOM中的事件对象.IE中的事件对象以及跨浏览器的事件对象三个部分. 对于事件处理程序,大家可以看我的博文<JavaScript中的五种事件处理程序>. 第一部分:DOM事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论是HMTL特性.DOM0级还是

详解javascript中的this对象

详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性.特别是对于接触静态语言比较久了的同志来说更是如此. 示例说明 我们先来看一个最简单的示例: <script type=&q

一些JavaScript中的DOM的优化小技巧

在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象集合 NodeList 当我们调用:getElementsByTagName,getElementsByName,getElementsByClassName的时候,返回的结果是一个NodeList,这个NodeList是实时的.如果你修改对应的html,那么NodeList中也会得到修改. 而且,

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

JavaScript中的String对象

String对象提供的方法用于处理字符串及字符. 常用的一些方法: charAt(index):返回字符串中index处的字符. indexOf(searchValue,[fromIndex]):该方法在字符串中寻找第一次出现的searchValue.如果给定了fromIndex,则从字符串内该位置开始搜索,当searchValue找到后,返回该串第一个字符的位置. lastIndexOf(searchValue,[fromIndex]):从字符串的尾部向前搜索searchValue,并报告找到

JavaScript中创建字典对象(dictionary)实例

这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象仅仅是个数组,无法提供通过关键字来获取保存的数据,jQuery源码中提供了一种非常好的方式来解决这个问题,先看一下源码: 复制代码代码如下: function createCache() { var keys = []; function cache(key, value) {  // Use (k

JavaScript中的Math对象

Math对象中提供的计算功能执行起来比你在代码中写的js要快得多,这是它的一个很好的优点. 属性: 属性 说明 Math.E 即常量e的值 Math.LN10 ln10 Math.LN2 ln2 Math.LOG2E 2为底e的对数 Math.LOG10E 10为底e的对数 Math.PI π Math.SQRT1_2 1/2的平方根 Math.SQRT2  2的平方根 方法: Math.min():求最小值 Math.max():求最大值 Math.max(1,2,3,4,5) // 5 Ma

javascript中的Array对象的slice()、call()、apply()详解

来51cto已经很多年,就是没怎么写文字,今天来一篇介绍JS的,文章篇幅不是很大,大部分内容是我参考了别人的博客后经过自己理解,自己整理的.方便自己以后回顾知识.文中涉及到javascript中的Array对象的slice().call().apply(); slice()方法,在我之前做的项目中,有两种数据类型下用到过.第一种是string类型的,还有一种是Array对象: string对象的slice(): 定义和用法 slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部