【深入xx】二三、二四
深入理解JavaScript系列（23）：JavaScript与DOM（上）
http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8" /> <title></title></head><body> <div> <p>1</p> <p id="some-id">This is text</p> <p>2</p> </div> <table> <tbody> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> </tbody> </table> <script type="text/javascript"> var theDiv = document.getElementsByTagName('div')[0]; var paragraph = document.getElementById('some-id'); console.log( paragraph.id, paragraph.getAttribute('id'), paragraph.parentNode, // 以下，空格换行带来不是想要的结果 paragraph.firstChild, paragraph.childNodes[0], paragraph.lastChild, paragraph.nextSibling, paragraph.previousSibling ); if (paragraph.nextSibling.nodeType == 3) { paragraph.innerHTML += 'cc'; } // 创建text节点 var someText = 'This is the text I want to add'; var textNode = document.createTextNode(someText); paragraph.appendChild(textNode); // 创建元素节点 var myNewLink = document.createElement('a'); myNewLink.href = 'http://google.com'; myNewLink.appendChild(document.createTextNode('Visit Google')); paragraph.appendChild(myNewLink); function addEvent(elem, type, fn) { if (elem.attachEvent) { elem.attachEvent('on' + type, fn); // 不是if else return; } if (elem.addEventListener) { elem.addEventListener(type, fn, false); } } function removeEvent(elem, type, fn) { if (elem.detachEvent) { elem.detachEvent('on' + type, fn); return; } if (elem.removeEventListener) { elem.removeEventListener(type, fn, false); } } addEvent(paragraph, 'click', function () { alert('YOU CLICKED ME!!'); // arguments.callee arguments对象包含了所有传递进来的参数以及该函数自身(callee) removeEvent(paragraph, 'click', arguments.callee); }); // 现在很多JS类库都已经封装好了e.preventDefault代码，也就是说在IE里可用了，但是原理上依然是使用returnValue来实现的 function myEventHandler(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } addEvent(paragraph, 'click', myEventHandler); function myParagraphEventHandler(e) { e = e || window.event; if(e.stopPropagation) { // W3C实现 e.stopPropagation(); } else { // IE实现 e.cancelBubble = true; } } addEvent(paragraph.getElementsByTagName('a')[0], 'click', myParagraphEventHandler); document.getElementsByTagName('table')[0].onclick = function (e) { e = e || window.event; var targetNode = e.target || e.srcElement; if (targetNode.nodeName.toLowerCase() === 'td') { alert('td'); } }; </script></body></html>TAG:
