9.04 js事件的学习

onload 页面加载完成时触发 onclick鼠标左击 ondblclick鼠标双击 onmouseover鼠标滑过时触发 onmouseout鼠标离开时触发 onfocus获得焦点 onblur失去焦点 onchange改变 最后是表单传值的代码 文本修改 一、访问（获取） 1、getElementById() 语法；document.getElementById(“id名”) ———— 返回带有指定id名 的元素。

使用getElementById()获取内容!

//获取id名为getText（此时内容无法在网页中打印出来）后,重新赋值给x,为以后引用简化代码。 var x=document.getElementById("getText"); //使用“document.getElementById("id名").innerHTML”的形式，此时内容可打印出来。 document.write("

此时内容可打印出来: " + x.innerHTML + "

"); 1 2、getElementsByTagName() 语法；document.getElementsByTagName(“标签”) ————返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

使用getElementsByTagName()获取内容1!

使用getElementsByTagName()获取内容2!

var x=document.getElementsByTagName("p"); //获取所有标签

内容后,重新赋值给x,为以后引用简化代码。

1 3、getElementsByClassName() ————返回包含带有指定类名的所有元素的节点列表。 ————一般，不推荐使用。 二、删除 removeChild 语法；父节点.removeChild(子节点)

删除removeChild第一段。

删除removeChild第二段。

//获取父节点。
var parentnode=document.getElementById(“div1”);
//获取子节点。
var childnode=document.getElementById(“p1”);

//删除父节点中的子节点。
parentnode.removeChild(childnode);

1

三、替换（修改）
replaceChild()

语法；父节点.replaceChild(新子节点,原子节点);

替换（修改）replaceChild()内容1

替换（修改）replaceChild()内容2

//创建新节点
var newNode=document.createElement(“p”);
//创建新节点的内容。
var newNodeContent=document.createTextNode(“这是替换后的文档段。”);
//把新节点的内容附加给新节点
newNode.appendChild(newNodeContent);

//获取父节点
var p=document.getElementById("div1");
//获取子节点
var c=document.getElementById("p1");
//在父节点p中，用新子节点newNode替换原子节点c
p.replaceChild(newNode,c);

1

四、增加
1、插入子节点最后面

appendChild()
语法；父节点.appendChild(新子节点)

appendChild()插入子节点最后面1。

appendChild()插入子节点最后面2。

//创建新子节点
var newNode=document.createElement(“p”);
//创建新子节点的内容。
var newNodeContent=document.createTextNode(“这是插入后的文档段。”);
//把新子节点的内容附加给新子节点
newNode.appendChild(newNodeContent);

//获取父节点。
var p=document.getElementById("div1");
//把新子节点插入父节点的末尾。
p.appendChild(newNode);

1

2、插入在某子节点之前

insertBefore()
语法；父节点.insertBefore(新子节点,原子节点)

insertBefore()在某子节点之前加新子节点内容1。

insertBefore()在某子节点之前加新子节点内容2。

//创建新子节点
var newNode=document.createElement(“p”);
//创建新子节点的内容
var newNodeContent=document.createTextNode(“这是一个新段落。”);
//把新子节点的内容附加到新子节点中
newNode.appendChild(newNodeContent);

//获取父节点
var p=document.getElementById("div1");
//获取子节点
var c=document.getElementById("p1");
//在父节点中，把新子节点插入原子节点的前面。
p.insertBefore(newNode,c);

1