js Dom

1. window对象作为全局对象,也就是说你可以通过window来访问全局对象。

  1.  属性在对象下面以变量的形式存放,在页面上创建的所有全局对象都会变成window对象的属性。
  2. 方法在对象下面以函数的形式存放,因为左右的函数都存放在window对象下面,所以他们也可以称为方法。

2. DOM为web文档创建带有层级的结果,这些层级是通过node节点组成,这里有几种DOM node类型,最重要的是Element, Text, Document。

  1.  Element节点在页面里展示的是一个元素,所以如果你有段落元素(<p>),你可以通过这个DOM节点来访问。
  2.  Text节点在页面里展示的所有文本相关的元素,所以如果你的段落有文本在里面的话,你可以直接通过DOM的Text节点来访问这个文本
  3.  Document节点代表是整个文档,它是DOM的根节点。

3. 每个引擎对DOM标准的实现有一些轻微的不同。例如,Firefox浏览器使用的Gecko引擎有着很好的实现(尽管没有完全遵守W3C规范),但IE浏览器使用的Trident引擎的实现却不完整而且还有bug,给开发人言带来了很多问题。

(function () {
    // 这里自调用函数
})();

Object

一个对象是一个key-value的集合,和数组相似,唯一的不同是你可以为每个数据定义一个名称。

// 2种类型定义Object对象

// 字面量(大括号)
var profile = {
    name: ‘Bob‘,
    age: 99,
    job: ‘Freelance Hitman‘
};

// 使用Object构造函数
var profile = new Object();
profile.name = ‘Bob‘;
profile.age = 99;
profile.job = ‘Freelance Hitman‘;  

getElementsByTagName

getElementsByTagName方法返回的是一个节点集合,和数组类似也有length属性,重要的一个特性是他是live的——如果你 在该元素里添加一个新的li元素,这个集合就会自动更新,介于他和数组类型,所以可以和访问数组一样的方法来访问,所以从0开始:

// 访问无序列表: [0]索引
var unorderedList = document.getElementsByTagName(‘ul‘)[0];

// 获取所有的li集合:  
var allListItems = unorderedList.getElementsByTagName(‘li‘);

// 循环遍历
for (var i = 0, length = allListItems.length; i < length; i++) {
    // 弹出该节点的text内容
    alert(allListItems[i].firstChild.data);
} 

所有的节点都有这些属性,都是可以用于访问相关的node节点:

  1. Node.childNodes: 访问一个单元素下所有的直接子节点元素,可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点(比如text节点或其他元素节点)。
  2. Node.firstChild: 与‘childNodes’数组的第一个项(‘Element.childNodes[0]‘)是同样的效果,仅仅是快捷方式。
  3. Node.lastChild: 与‘childNodes’数组的最后一个项(‘Element.childNodes[Element.childNodes.length-1]‘)是同样的效果,仅仅是快捷方式。shortcut.
  4. Node.parentNode: 访问当前节点的父节点,父节点只能有一个,祖节点可以用‘Node.parentNode.parentNode’的形式来访问。
  5. Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
  6. Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。

有个非常重要的知识点:那就是元素之间不能有空格,如果ul和li之间有空格的话,就会被认为是内容为空的text node节点,这样ul.childNodes[0]就不是第一个li元素了。相应地,<p>的下一个节点也不是<ul>,因 为<p>和<ul>之间有一个空行的节点,一般遇到这种情况需要遍历所有的子节点然后判断nodeType类型,1是元素,2是 属性,3是text节点

属性可以像数组一样访问

function changeStyle(elem, property, val) {
    elem.style[property] = val; // 使用[]来访问属性
}

// 使用上述的函数:  
var myIntro = document.getElementById(‘intro‘); // 获取intro文本对象
changeStyle(myIntro, ‘color‘, ‘red‘);  

很多元素的属性都是只读的,也就是说不能修改他们的值。例如,你不能直接修改一个节点的parentNode属性,如果你修改只读属性的时候浏览器会抛出错误:例如,抛出错误“setting a property that has only a getter”。

创建元素可以通过createElement方法,而创建text节点可以使用createTextNode。

var myIntro = document.getElementById(‘intro‘);  
  
// 添加新连接到文本节点
// 首先,创建新连接元素
var myNewLink = document.createElement(‘a‘); // <a/>  
myNewLink.href = ‘http://google.com‘; // <a href="http://google.com"/>  
myNewLink.appendChild(document.createTextNode(‘Visit Google‘)); 
// <a href="http://google.com">Visit Google</a>  
  
// 将内容附件到文本节点
myIntro.appendChild(myNewLink);

另外DOM里还有一个insertBefore方法用于再节点前面附件内容,通过insertBefore和appendChild我们可以实现自己的insertAfter函数:

// ‘Target‘是DOM里已经存在的元素
// ‘Bullet‘是要插入的新元素
  
function insertAfter(target, bullet) {  
    target.nextSibling ?  
        target.parentNode.insertBefore(bullet, target.nextSibling)  
        : target.parentNode.appendChild(bullet);  
}  
  
// 使用了3目表达式:  
// 格式:条件?条件为true时的表达式:条件为false时的表达式

鼠标事件

  1.  ‘mousedown’ – 鼠标设备按下一个元素的时候触发mousedown事件。
  2.  ‘mouseup’ – 鼠标设备从按下的元素上弹起的时候触发mouseup事件。
  3.  ‘click’ – 鼠标点击元素的时候触发click事件。
  4.  ‘dblclick’ – 鼠标双击元素的时候触发dblclick事件。
  5. mouseover’ – 鼠标移动到某元素上的时候触发mouseover事件。
  6.  ‘mouseout’ – 鼠标从某元素离开的时候触发mouseout事件。
  7.  ‘mousemove’ – 鼠标在某元素上移动但未离开的时候触发mousemove事件。

键盘事件

  1. keypress’ – 按键按下的时候触发该事件。
  2. keydown’ – 按键按下的时候触发该事件,并且在keypress事件之前。
  3. keyup’ – 按键松开的时候触发该事件,在keydown和keypress事件之后。

表单事件

  1. select’ – 文本字段(input, textarea等)的文本被选择的时候触发该事件。
  2. change’ – 控件失去input焦点的时候触发该事件(或者值被改变的时候)。
  3. submit’ – 表单提交的时候触发该事件。
  4. reset’ – 表单重置的时候触发该事件。
  5. focus’ – 元素获得焦点的时候触发该事件,通常来自鼠标设备或Tab导航。
  6. blur’ – 元素失去焦点的时候触发该事件,通常来自鼠标设备或Tab导航。

其它事件

  1. load’ – 页面加载完毕(包括内容、图片、frame、object)的时候触发该事件。
  2. resize’ – 页面大小改变的时候触发该事件(例如浏览器缩放)。
  3. scroll’ – 页面滚动的时候触发该事件。
  4. unload’ – 从页面或frame删除所有内容的时候触发该事件(例如离开一个页面)。

关于W3C和微软模型还有其他的少许差异,比如this,在触发事件的时候函数中的this一般都是该元素上下文,,也就说this引用该元素自身,在基本事件注册和W3C模型中都没有问题,但在微软模型的实现里却可能出错,请参考如下代码:

function myEventHandler() {
    this.style.display = ‘none‘;
}
// 正常工作,this是代表该元素
myIntro.onclick = myEventHandler;
// 正常工作,this是代表该元素
myIntro.addEventListener(‘click‘, myEventHandler, false);
// 不正常,这时候的this是代表Window对象
myIntro.attachEvent(‘onclick‘, myEventHandler);

这里有一些方式可以避免这个问题,最简单的方式是使用前面的基本事件注册方式,或者是再做一个通用的addEvent。

Event对象,当事件发生的时候出发某个函数,该Event对象将自动在函数内可用,该对象包含了很多事件触发时候的信息,但IE却没有这么实现,而是 自己实现的,IE浏览器是通过全局对象window下的event属性来包含这些信息,虽然不是大问题,但我们也需要注意一下,下面的代码是兼容性的:

function myEventHandler(e) {
    e = e || window.event;
    // IE浏览器是通过全局对象window下的event属性来包含这些信息 
    /*防止默认行为:Event对象下的命令和属性都很有用,遗憾的是不不能全兼容浏览器,例如当你想取消默认的行为的时候你可以使用Event对象里的preventDefault()方法,
但IE里不得不使用对象的returnValue属性值来控制
*/ if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } }

停止冒泡

function myParagraphEventHandler(e) {
    e = e || window.event;
    // 停止向上冒泡
    if (e.stopPropagation) {
        // W3C实现  
        e.stopPropagation();
    } else {
        // IE实现  
        e.cancelBubble = true;
    }
}
// 使用我们自定义的addEvent函数将myParagraphEventHandler绑定到click事件上:  
addEvent(document.getElementsByTagName(‘p‘)[0], ‘click‘, myParagraphEventHandler);

事件委托

var myTable = document.getElementById(‘my-table‘);
myTable.onclick = function () {
    // 处理浏览器兼容
    e = e || window.event;
    var targetNode = e.target || e.srcElement;
    // 测试如果点击的是TR就触发
    if (targetNode.nodeName.toLowerCase() === ‘tr‘) {
        alert(‘You clicked a table row!‘);
    }
}

js Dom,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。