javascript DOM 学习

时间：2014-03-28 21:15:36 阅读：486 评论：0 收藏：0 [点我收藏+]
<!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>
<style type="text/css">
.child2{ width:300px; height:auto;}
.child5{color:Red;}
</style>
</head>
<body>
    <div id="father" class="father">
        <div id="child1" class="child1">child1</div>
        <div id="child2" class="child2">child2</div>
        <div id="child3" class="child3" mark="mark" style="width:200px;">child3</div>
     </div>
     <ul>
        <li></li>
        <li></li>
        <li></li>
     </ul>
     <img src="444444.png" alt="" style="width:200px; height:200px;"/>
     <img src="444444.png" alt="" style="width:200px; height:200px;"/>
     <img src="444444.png" alt="" style="width:200px; height:200px;"/>
</body>
<script type="text/javascript">
    //(1)nodeType 节点
    // 节点包括12种属性
    // 1  元素节点
    // 2  属性
    // 3  文本
    // 8  注释
    // 9  文档
    var father = document.getElementById("father");
    if(father.nodeType==1){//兼容所有浏览器
        console.log("father is a element");
    }
    //nodeName 标签名
    if(father.nodeType==1){
        console.log("nodeName:"+father.nodeName);
        console.log("nodeValue："+father.nodeValue);
        console.log("className:"+father.className);
    }
    
    //(2)节点关系 每个节点都有个childNodes属性，其中保存着NodeList对象
    //childNodes
    var child1 = father.childNodes[0];
    if(child1!=null){
        console.log("child1:"+child1.className);//ie下正常 chrome firefox下显示undefined 
    }
    //firstChild
    var firstChild = father.firstChild;
    if(firstChild!=null){
        console.log("firstChild:" + firstChild.className); //ie下正常 chrome firefox下显示undefined 
    }
    //lastChild
    var lastChild = father.lastChild;
    if(lastChild!=null){
        console.log("lastChild:" + lastChild.className); //ie下正常 chrome firefox下显示undefined 
    }
    //nextSibling 
    var child1Next = child1.nextSibling;
    if(child1Next!=null){
        console.log("child1Next:" + child1Next.className); //ie下正常 chrome firefox下显示正常
    }

    //child1NextPre
    var child1NextPre = child1Next.previousSibling;
    //hasChildNodes() 是否具有子节点
    console.log("hasChildNodes:" + father.hasChildNodes());
    //appendChild 不会添加，只会更换位置
    //father.appendChild(child1Next);

    //question1 className 在ie下显示正常，在chrome firefox先显示不正常 因为使用childNodes 在chrome firefox下回出现很多空的节点
    //例如 enter回车键，也会产生节点
    //ie下 father只有2个childnode
    //chrome firefox下有5个childnode 

    //0 : 回车 
    //1 : child1
    //2 : 回车
    //3 : child2
    //4 : 回车

    //解决方案 将回车 空格等等节点去掉
    function getNewNodes(obj) {
        var newNode = [];
        var childnodes = obj.childNodes;
        for (var n in childnodes) {
            if (childnodes[n].nodeType == 1) {//如果为节点元素，则push进数组
                newNode.push(childnodes[n]);
            }
        }
        return newNode;
    }
    console.log(getNewNodes(father).toString());
    console.log(getNewNodes(father)[0].className)
    //parentNode 父节点
    var parentNode = getNewNodes(father)[0].parentNode;
    console.log(parentNode.className);
    //insertBefore 接收2个参数，如果第二个参数为null,则作用和appendChild一样，如果不为null，则将第一个参数节点插到第二个参数节点的前面
    var a = getNewNodes(father)[0];
    var b = getNewNodes(father)[1];
    var c = getNewNodes(father)[2];
    father.insertBefore(c, a);
    //replaceChild(newNode,oldNode)
    //removeChild(node)
  
    //区分浏览器
    function browserName() {
        var name = navigator.userAgent;
        if (name.toLowerCase().indexOf("firefox") !=-1) {
            return "firefox";
        }
        if (name.toLowerCase().indexOf("msie") != -1) {
            return "ie";
        }
        if (name.toLowerCase().indexOf("chrome") != -1) {
            return "chrome";
        }
        if (name.toLowerCase().indexOf("opera") != -1) {
            return "opera";
        }
    }
    console.log("浏览器：" + browserName());

    //document 类型
    //document 是 HTMLDocument的一个实例，表示整个html页面
    //document对象是window对象的一个属性
    //nodeType 为9 ，nodeName 为#document nodeValue为null ownerDocument为null
    // documentElement
    //
    var html = document.childNodes;
    for (var k in html) {
        if (html[k].nodeType == 1) {
            console.log(html[k].nodeName);
        }
    }
    //console.log(html);
    var db = document.body;
    var originalTitle = document.title;
    document.title = "Fuck you";
    var url = document.URL;
    console.log(url);
    var domain = document.domain;
    console.log(domain);
    var reffer = document.referrer;
    //document.

    //查找元素 getElementById() getElementsByTagName()
    var imgs = document.getElementsByTagName("img");
    console.log(imgs.length);
    console.log(imgs[0].src);
    var allElement = document.getElementsByTagName("*");
    for (var k in allElement) {
        console.log(allElement[k]);
    }
    //getElementsByName()
    //document.anchors; document.applets; document.forms; document.links;
    //document.write;document.writeln的区别是writein会换行，我测试的时候出现的是空格
    document.write("dd,");
    document.writeln("dddd");
    document.write("dd"); //dd,dddd dd

    //element 类型
    //nodeType 为 1
    //parentNode 可能为Document 或者Element

    //html 元素
    // id title lang dir className 属性可以直接显示出来
    var divId = getNewNodes(father)[0].id;//兼容
    var divClassName = getNewNodes(father)[0].className;//兼容
    console.log(divId + "," + divClassName);
    divId = getNewNodes(father)[0].getAttribute("id");//兼容
    divClassName = getNewNodes(father)[0].getAttribute("className");//注意，不兼容的写法
    console.log(divId + divClassName); //在Ie7下获取不到className的值
    //所以标准的兼容的写法还是直接写.className
    var mark = getNewNodes(father)[0].getAttribute("mark");
    console.log("mark:" + mark); //兼容
    //setAttribute()
    getNewNodes(father)[0].setAttribute("mark", "mark1");
    //removeAttribute() ie6不支持

    //css
    var div = getNewNodes(father)[0];//样式潜入
    //console.log("嵌入"+div.style.width);
    div = getNewNodes(father)[2];
    console.log(div.className + div.style.width); //样式内联
    //console.log(div.currentStyle.width); //IE
    //console.log(window.getComputedStyle(div, null).getPropertyValue("width"));
    function getRealStyle(obj, styleName) {
       // var element = document.getElementById(id);
        var realStyle = null;
        if (obj.currentStyle)
            realStyle = obj.currentStyle[styleName];
        else if (window.getComputedStyle)
            realStyle = window.getComputedStyle(obj, null)[styleName];
        return realStyle;
    }
    console.log("兼容：" + getRealStyle(div, "width"));

    //createElement 创建元素
    var newDiv = document.createElement("div");
    newDiv.setAttribute("id", "child4");
    newDiv.setAttribute("mark", "mark4");
    newDiv.className = "child4";
    newDiv.innerHTML = "child4";
    father.appendChild(newDiv);
    var div2 = document.createElement("div");
    div2.className = "child5";
    div2.innerHTML = "child5";
    father.appendChild(div2);

    var div3 =document.createElement("table");
    var html1 = "<tr><td>dddd</td></tr>";
    div3.innerHTML = html1;
    father.appendChild(div3);
    //text 类型 nodeType 3
    //comment 注释类型 nodeType 8
</script>
</html>
javascript DOM 学习,布布扣,bubuko.com
javascript DOM 学习
原文：http://www.cnblogs.com/lihaozhou/p/3629633.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)