• 《JS高级程序设计》PART6. DOM基础


    1.使用document处理html节点:

    <p id="ip1">hello </p>

    假如oP包含指向这个元素的一个引用,则可以这样访问到id属性的值:

    var sId = oP.attributes.getNamedItem("id").nodeValue;

    or 更简单:var sId = op.getAttribute("id"); //对应的setAttribute("id","newId");

    2.访问指定节点:

    · getElementsByTagName():返回一个包含所有tagname特性等于某个指定值的集合:

    var oImg = document.getElementByTagname("img");

    · getElementsByName():通过name来访问控件:

    <input type="radio" name = "redColor" value="red"/>red

    use:var or = document.getElementByName("redColor");

    alert(var.getAttribute("or"));//"red"

    · getElementById:通过Id值来访问;这种方法效率更高,因为html中id值唯一;

    注:如果给定的ID匹配某个元素的name特性,则IE6.0还会返回这个元素,这是IE6的一个bug!!!

    注:DOM操作必须页面完全载入之后才能进行;在页面完全下载到客户端之前,是无法完全构建DOM树的。因此,必须使用onload时间句柄来执行所有的代码。

    注:IE6在setAttribute()上有个很大的问题:当使用它时,变更并不会总是正确的反应出来,因此,如果要支持IE,最好尽可能使用属性(HTML DOM特征)来替换:

    eg: var oImg = document.getElementByName("coolImg");

    oImg.getAttribute("src") ==> oImg.src

    oImg.setAttribut("src","mypic2.jpg"); ==> oImg.src = "mypic2.jpg";

     

    使用DOM Level2 遍历DOM(只能在Mozilla等中才有的,IE6不支持):NodeIterator,TreeWalker

    测试代码:

    <html> 
    
    <head> 
    
    <script type="text/Javascript"> 
    
    function sayHi(){ 
    
    alert("hi"); 
    
    window.defaultStatus = "hello,colinOrg"; 
    
    } 
    
    function changeHref(){ 
    
    var baidus = document.getElementById("baidu"); 
    
    baidus.href="http://www.google.com/"; 
    
    } 
    
    //setTimeout(function (){location.replace("http://www.ityouhui.com")},2000); 
    
    </script> 
    
    </head> 
    
    <body onload="changeHref()"> 
    
    <p>1111</p> 
    
    <input type="button" onclick="setTimeout(sayHi,1000);"/> 
    
    <a href="www.ityouhui.com" onmouseover="window.status='ityouhui' ">ITyouhui</a> 
    
    <a href="http://www.baidu.com" id="baidu">这是百度链接,通过document改为Google的</a> 
    
    <p>222</P> 
    
    </body>
    

    More:http://blog.donews.com/me1105/archive/2011/02/12/127.aspx

  • 相关阅读:
    【转】 springBoot(5)---单元测试,全局异常
    【转】 springBoot(4)---热部署,配置文件使用
    【转】 springBoot(3)---目录结构,文件上传
    【转】 springBoot(2)---快速创建项目,初解jackson
    【转】 springBoot(1)---springboot初步理解
    【转】 SpringBoot+MyBatis+MySQL读写分离
    简单请求 vs 非简单请求
    H5新增的API
    图片
    vue更新dom的diff算法
  • 原文地址:https://www.cnblogs.com/me115/p/1952727.html
Copyright © 2020-2023  润新知