JavaScript常见原生DOM操作

查询

• 按照ID查询
  • document.getElementById()
• 按照Class查询
  • element.getElementsByClassName()ie9+
  • element.querySelectorAll()ie8
• 按照Tag查询
  • element.getElementsByTagName()ie6+
• 获取父元素
  • element.parentNode()
• 获取子元素
  • element.childNodes()

• 获取兄弟元素

  • 获取前面所有的兄弟元素
    • element.previousSibling()
  • 获取后面所有的兄弟元素
    • element.nextSibling()

      DOM操作

• 创建DOM

  • document.createElement(TagName)

• 新增DOM

  • parentElement.appendChild(child)添加到最后面
  • parentElement.insertBefore(newElement,Element)newElement添加到element前面

    修改DOM

• 修改CSS

  • element.style.css属性
• 修改属性
  • element.setAttribute()
  • element.removeAtrribute()
  • element.classNam

    事件委托

    JavaScript原生实现事件委托 ```javascript

• Go somewhere
• Do something
• Say hi

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
item1.onclick = function() {
  location.href = "http://www.baidu.com";
};
item2.onclick = function() {
  document.title = "事件委托";
};
item3.onclick = function() {
  alert("hi");
};

//如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式， 那么结果就会有数不清的代码用于添加事件处理程序。 此时，可以利用事件委托技术解决这个问题。使用事件委托， 只需在 DOM 树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示 document.addEventListener(“click”, function (event) { var target = event.target; switch (target.id) { case “doSomething”: document.title = “事件委托”; break; case “goSomewhere”: location.href = “http://www.baidu.com“; break; case “sayHi”: alert(“hi”); break; } })

<a name="c3nLi"></a>
### addEventListener( _event_,  _function_,  _useCapture_)
addEventListener()方法，即为事件监听；可以使用removeEventListener()方法来移除事件的监听
```javascript
element.addEventListener(event,function,useCapture);
element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);