zoukankan      html  css  js  c++  java
  • javascript 动态操作Html

    <html>
            <body>
              <p>aaaaa</p>
              <input type="button" value="confirm"/>
              <div id=”mydiv”> some text </div>
              <input type=”radio” value=”red” name=”color” id=”colorRed”>
              <input type=”radio” value=”green” name=”color” id=”colorGreen” testatr=”testvalue”>
            </body>
    </html>

    1.获得html标签

    var html=document.documentElement

    var html=document.childNodes[0]

    var html= document.firstChild

    2. 获得body标签

    var body= document.body

    3. 获得文档标题

    var title= document.title;

    document.title=”new titile”;

    4. 获得URL,Domain,Referrer,及跨域问题

    var url= document.URL;//获得浏览器地址栏中完整的URL信息

    var domain= document.domain;//获取该页面的域名

    var referrer=document.referrer;//表示连接到此页面的URL地址信息,可为空。

    对于页面中包含其他子域的框架或内嵌框架时,由于javascript 无法跨域访问,此时可以设置referrer属性来解决跨域问题。

    假设www.test.com内某页面加载了来自p2p.test.com的内嵌框架,可以将domain 设置为test.com来解决跨域问题。

    具体可以参考http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

    5. 根据id获得元素

    var div= document.getElementById(“mydiv”); //仅返回文档中第一次出现的元素。

    6. 根据tag name 获得元素

    var img= document.getElementsByTagName(“img”);//返回HTMLCollection

    7. 根据name属性获得元素

    var radio=document.getElementsByName(“color”);

    8. 其他特殊的集合

    document.anchors: 包含name特性的所有<a> 元素

    document.forms :所有<form>元素,同document.getElementsByTagName(“form”)

    document.images : 所有<img> 元素集合

    document.links : 所有含href特性的<a> 元素

    9. 获取自定义属性值

    var q= document.getElementById(“mydiv”).getAttribute(“testatr”);

    10.创建元素

    var div=document.createElement(“div”);

    div.id=”newdivid”;

    div.className=”box”;

    document.body.appendChild(div);

    11. 动态javacript,css

    <script type=”text/javascript” src=”client.js”></script>

    或<script type=”text/javascript”>

    function sayhi(){

             alert(“hi”);

    }

    </script>

    var script =document.createElement(“script”);

    script.type=”text/javascript”;

    script.src=”client.js”或

    var function=”function sayhi(){alert(‘hi’);}”;

    try{

    script.appendChild(document.createTextNode(“function”));

    }catch(ex){

    script.text=”function”;

    }

    document.body.appendChild(“script”);

    考虑到不同浏览器兼容性,汇总如下:

    <script type="text/javascript">
    function loadscript(url){
        //<script type=”text/javascript” src=”client.js”></script>
        var script =document.createElement(“script”);
        script.type=”text/javascript”;
        script.src=url;
        document.body.appendChild(script);
    }
    function loadscripttext(code){
        //<script type=”text/javascript”>
        //function sayhi(){alert("hi");}
        //</script>
        var script =document.createElement(“script”);
        script.type=”text/javascript”;
        try{
                script.appendChild(document.createTextNode(“function”));
            }catch(ex){
                //IE 视script为特殊元素,不允许修改script子节点
                script.text=”function”;
            }
        document.body.appendChild(script);
    }
    
    function loadstyle(url){
        //<link rel="stylesheet" type="text/css" href="style.css">
        var link =document.createElement(“link”);
        link.rel="stylesheet";
        link.type=”text/css”;
        link.href=url;
        var head =document.getElementsByTagName("head")[0];
        head.appendChild(link);
    }
    function loadstyletext(css){
        //<style type=”text/css”>
        //body{background-color:red}
        //</style>
        var style =document.createElement(“style”);
        style.type=”text/css”;
        try{
                style.appendChild(document.createTextNode(css));
            }catch(ex){
                //IE 视style为特殊元素,不允许修改style子节点
                style.text=css;
            }
        var head =document.getElementsByTagName("head")[0];
        head.appendChild(link);
    }
    </script>
  • 相关阅读:
    链式表的操作
    顺序表的操作
    MDX基础
    1071 小赌怡情 (15 分)
    1069 微博转发抽奖 (20 分)
    1068 万绿丛中一点红 (20 分)
    1066 图像过滤 (15 分)
    02-线性结构2 一元多项式的乘法与加法运算 (20 分
    03-树1 树的同构 (25 分)
    03-树3 Tree Traversals Again (25 分)
  • 原文地址:https://www.cnblogs.com/yidifanhua/p/5414831.html
Copyright © 2011-2022 走看看