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”>

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>

posted @ 2016-04-20 22:46 一地繁华阅读(794) 评论(0) 编辑收藏举报

刷新页面返回顶部

一地繁华

javascript 动态操作Html

公告