实例一:根据name获取网页中的所有复选框
<script type="text/javascript">
//获取多个DOM
function getDomsByName(){
//获取的DOMs
var doms = document.getElementsByName("myName");
var str = ''; //定义拼接字符变量
for(var i=0; i<doms.length; i++){
str += doms[i].tagName; //拼接标签的名字
str += ","; //分隔符
}
alert("两个DOM的标签是:" + str); //提示
}
</script>
实例二:打印一个元素的所有属性
<script type="text/javascript">
//获取DOM的所有属性
function getDomValues(){
//获取链接的DOM
var myLink = document.getElementById("myLink");
var str = ''; //结果拼接
for(var prop in myLink){ //循环遍历myLink的所有属性key
//拼接到str,key和value用冒号隔开
str += prop + " : " + myLink[prop] + "<br/>";
}
//打印到网页里
document.getElementById("valuesP").innerHTML = str;
}
</script>
实例三:遍历HTML文档内容
<script type="text/javascript">
//遍历文档树
function getDomTree(){
alert(text(document.body)); //用提示框显示树内容
}
function text(elem){
//定义文字字符串
var t="";
//获取改节点的所有子节点
var elemelem = elem.childNodes;
//遍历所有子节点
for(var i=0; i<elemelem.length;i++){
//当前节点
var e = elemelem[i];
//文本、注释节点不被遍历,并判断其是否为直接父节点
if(e.parentNode == elem && e.nodeType == 1){
//把标签名添加到文本内容里
t += e.tagName + ' ';
//循环子节点
if(e.childNodes.length > 0){
//如果子节点只有一个文本子节点,则跳过
if(e.childNodes.length == 1){
var fe = e.childNodes[0];
//是否为文本子节点
if(fe.nodeType == 3)
continue; //跳过
}
t += '\n\t'; //子节点分隔符
t += text(e); //递归还有子元素的子节点
}
}
}
return t; //返回得到的文本
}
</script>
实例四:动态创建网页新元素
<script type="text/javascript">
//创建新元素
function createNewElements(){
//使用innerHTML创建新元素
var p1 = document.getElementById("p1");
//设置innerHTML内容
p1.innerHTML = "<span>我的dom文本1</span>";
//使用createElement来创建新元素
var span = document.createElement("span");
//为新元素内容创建一个文本节点
span.appendChild(document.createTextNode("我的dom文本2"));
var p2 = document.getElementById("p2");
//挂接
p2.appendChild(span);
}
</script>
<!-- 定义为新元素挂接的容器元素 -->
<p id="p1"></p>
<p id="p2"></p>
实例五:删除元素
<script type="text/javascript">
//删除元素
function deleteElement(){
//获取准备删除的DOM
var del = document.getElementById("del");
//调用删除函数彻底删除
del.parentNode.removeChild(del);
}
</script>
实例六:主动触发按钮的单击事件
<script type="text/javascript">
//触发按钮单击的事件
function fireBtnClick(){
//获取到按钮DOM
var myBtn = document.getElementById("myBtn");
//使用click()函数
myBtn.click();
}
</script>
<input type="button" value="触发按钮的事件" onclick="fireBtnClick();"/>
<input id="myBtn" type="button" value="提示按钮" onclick="alert('我被提示了!')"/>
实例七:引用同级的元素
<script type="text/javascript">
//获取同级按钮的value
function getLevelBtnVal(btn){
var p = btn.parentNode; //通过单击按钮获取它的父节点
var children = p.childNodes; //得到父节点的所有子节点
//遍历子节点
for(var i=0; i<children.length; i++){
//判断不是当前节点,但是同类节点的节点
if(children[i] != btn && children[i].nodeType==btn.nodeType){
alert(children[i].value); //提示对方的value值
}
}
}
</script>
<input type="button" value="获取同级按钮的value"
onclick="getLevelBtnVal(this);"/>
<input type="button" value="获取同级按钮的value2"
onclick="getLevelBtnVal(this);"/>
实例八:克隆元素
<script type="text/javascript">
//克隆元素
function cloneImg(){
//得到元素DOM
var myImg = document.getElementById("myImg");
//克隆出新的元素
var newImg = myImg.cloneNode(true);
//使用appendChild()函数挂接
document.getElementById("myContent").appendChild(newImg);
}
</script>
cloneNode接受一个布尔参数,为true时表示复制该节点及其所有子节点,为false时表示只复制该节点。
实例九:隐藏或显示元素
<script type="text/javascript">
//隐藏或显示元素
function showOrHide(){
//得到图片的DOM
var myImg = document.getElementById("myImg");
var display = myImg.style.display; //当前的显示样式
if(display != 'none'){ //是否正在隐藏
myImg.style.display = 'none'; //设为隐藏
}else{
myImg.style.display = ''; //取消隐藏
}
}
</script>
<input type="button" value="隐藏或显示" onclick="showOrHide();"/>
实例十:倒排序子元素
<script type="text/javascript">
//倒排序子元素的函数
function deleteChilds(){
//获取父DOM
var ul = document.getElementsByTagName('UL')[0];
if(ul.hasChildNodes()){//判断是否包含子元素
//子元素的个数
var len = ul.childNodes.length;
var arr = []; //新数组变量用于存储节点
for(var i=0;i<len;i++){//遍历
//把节点存入数组
arr[i] = ul.childNodes[0];
//从第一个元素开始删除
ul.removeChild(ul.childNodes[0]);
}
//倒过来遍历所有节点
for(var i=len-1;i>=0;i--){
ul.appendChild(arr[i]);//添加到ul为子元素
}
}
}
</script>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
实例十一:遍历HTML元素
<script type="text/javascript">
//遍历文档树
function getDomTree(){
alert(text(document.body)); //用提示框显示树内容
}
function text(elem){
//定义文字字符串
var t="";
//获取改节点的所有子节点
var elemelem = elem.childNodes;
//遍历所有子节点
for(var i=0; i<elemelem.length;i++){
//当前节点
var e = elemelem[i];
//文本、注释节点不被遍历,并判断其是否为直接父节点
if(e.parentNode == elem && e.nodeType == 1){
//把标签名添加到文本内容里
t += e.tagName + ' ';
//循环子节点
if(e.childNodes.length > 0){
t += '\n\t'; //子节点分隔符
t += text(e); //递归还有子元素的子节点
}
}
}
return t; //返回得到的文本
}
</script>
思路就是递归,但输出格式上还存在问题。