JavaScript DOM 操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/snoopy_ly/article/details/79420540

函数(外部函数和匿名函数)

document.addEventListener("click", myFunction);//执行函数为外部函数
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}

document.addEventListener("event", function(){ ... });"//执行函数为匿名函数

Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象。

Document 对象常用的属性和方法：

document.addEventListener() --向文档添加事件句柄

提示：使用 element.addEventListener() 方法为指定元素添加事件句柄。

可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

document.getElementById() --返回对拥有指定 id 的第一个对象的引用。

document.write() --向文档写 HTML 表达式或 JavaScript 代码。

元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。

元素对象常用的属性和方法：

element.addEventListener()

element.innerHTML() --设置或者返回元素的内容（即“元素节点”的内容）。

element.nodeValue -- 返回元素的节点值，可用于返回“文本节点”内容。

其他参考http://www.runoob.com/jsref/dom-obj-all.html

创建新的 HTML 元素

//如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");  //创建新的 <p> 元素
var node=document.createTextNode("这是新段落。");  //如需向 <p> 元素添加文本，您必须首先创建文本节点。
para.appendChild(node);  向 <p> 元素追加这个文本节点：

var element=document.getElementById("div1");  
element.appendChild(para);  //向一个已有的元素<div>追加这个新元素<p>。
</script>

删除已有的 HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
//方法一：
var parent=document.getElementById("div1");//先找到父节点
var child=document.getElementById("p1");//再找到要删除的子节点
parent.removeChild(child);//从父节点中删除子节点
//方法二：
var child=document.getElementById("p1");//找到要删除的子节点
child.parentNode.removeChild(child); //使用 parentNode 属性来找到父元素，从中删除该子节点
</script>

EventTarget.addEventListener()

该方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。事件目标可以是一个文档上的元素， Document 本身，或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

用法：

target.addEventListener(type, listener, options);

target -- 触发事件的对象，可以是元素，document，window等

type -- 表示监听事件类型的字符串。

常用的事件类型有：load, click, mousemove, mouseover, mouseout, mouseup, mousedown

listener --当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。

options --可选

//例一
window.addEventListener('load', function() {

}

//例二
<table id="outside">    
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

// 改变t2的函数
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 为table添加事件监听器
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

//例三  --在文档中添加点击事件。当用户在文档任何地方点击时，在 id="demo" 的 <p> 元素上输出 "Hello World"：
document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
})

getElementById() --属于document对象的一种方法，用于获取一个元素对象（元素节点）

该方法返回对拥有指定 ID 的第一个对象的引用（即返回指定元素的节点）；

用法：

document.getElementById(id)；
//例
<div id="demo"></div>
<div id="test">文本节点<div>one</div><div>two</div><div>three</div></div>
//注意<div><div>之间不能换行或有空格，否者空格和换行能也被当做一个节点

<script>
var s = document.getElementById("test");
var chils= s.childNodes; //获取s节点的所有子节点（数组）
var par=s.parentNode;   //得到s的父节点
var ns=s.nextSbiling;   //获得s的下一个兄弟节点
var ps=s.previousSbiling;  //得到s的上一个兄弟节点
var fc=s.firstChild;   //获得s的第一个子节点
var lc=s.lastChile;   //获得s的最后一个子节点

document.getElementById("demo").innerHTML=chils[1].innerHTML;
document.getElementById("demo").innerHTML=s.lastChild.innerHTML;  //返回元素节点的内容
document.getElementById("demo").innerHTML=s.firstChild.nodeValue; //返回文本节点的内容
</script>

说明：元素的 子节点可以是元素节点，文本节点，注释节点。