DOM基础-1

来源:互联网 发布:远程文件共享端口 编辑:程序博客网 时间:2024/06/05 05:22

DOM基础

这里写图片描述

childNodes和nodeType配合循环所有子节点

注:只使用childNodes会将文本节点算作子节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script>window.onload=function(){    var oUl=document.getElementById('ul1');    for(var i=0;i<oUl.childNodes.length;i++){        if(oUl.childNodes[i].nodeType==1){             oUl.childNodes[i].style.background='red';             }        }    };</script></head><body><ul id="ul1"><li></li><li></li></ul></body></html>

children

<title>无标题文档</title><script>window.onload=function(){    var oUl=document.getElementById('ul1');    for(var i=0;i<oUl.children.length;i++){             oUl.children[i].style.background='red';        }    };</script></head><body><ul id="ul1"><li></li><li></li></ul></body></html>

这里写图片描述

这里写图片描述


这里写图片描述


这里写图片描述

原创粉丝点击