首页 > 代码库 > javascript中的DOM对象的辨析

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;

javascript中的DOM对象的辨析