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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章