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);