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

javascript 动态操作Html的更多相关文章

  1. JavaScript动态操作style

    1.易错:修改元素的样式不是设置class属性,而是className属性.class是JS的一个保留关键字. 2.易错:单独修改样式的属性使用"style.属性名"3.注意在cs ...

  2. Javascript动态操作CSS总结

    一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left ...

  3. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  4. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  5. Javascript动态生成的页面信息爬取和openpyxl包FAQ小记

    最近,笔者在使用Requests模拟浏览器发送Post请求时,发现程序返回的html与浏览器F12观察到的略有不同,经过观察返回的response.text,cookies确认有效,因为我们可以看到返 ...

  6. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  7. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  8. JavaScript动态加载script方式引用百度地图API 拓展---JavaScript的Promise

    上一篇博客JavaScript动态加载script方式引用百度地图API,Uncaught ReferenceError: BMap is not defined 这篇文章中我接触到一个新的单词:Pr ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. cocos2d-x 使用UIWebView加载网页(顺便可以看到如何用OC调C++)

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=248 前段时间项目中要微博授权登 ...

  2. wifi测试相关（iwconfig，WPA Supplicant用法）

    iwconfig用法 1.打开无线网卡电源 iwconfig wlan0 txpower no 2.列出区域内的无线网络 iwconfig wlan0 scan 3.假设要连接到网络myhome(即e ...

  3. Linux学习笔记31——网络信息

    一 主机数据库函数 #include <netdb.h> struct hostent *gethostbyaddr(const void *addr, //地址 size_t len, ...

  4. [置顶] cocos2dx sqllite 增删查改等操作

    首先导入文件shell.c sqllite3.c sqlite3.h sqlite3etx.h文件(注意在生成安卓项目是 不要将shell.c写进android.mk文件中,写进去在cywin中生成会 ...

  5. linux内核--几个上下文(context)

    为了控制进程的执行,内核必须有能力挂起正在CPU上运行的进程,并恢复以前挂起的某个进程的执行,这种行为叫进程切换(process switch),任务切换(task switch)或上下文切换(con ...

  6. （转）Spring整合Redis作为缓存

           采用Redis作为Web系统的缓存.用Spring的Cache整合Redis. 一.关于redis的相关xml文件的写法 <?xml version="1.0" ...

  7. php如何修改SESSION的生存时间

    如何修改SESSION的生存时间 我们来手动设置 Session 的生存期: <?phpsession_start(); // 保存一天 $lifeTime = 24 * 3600; setco ...

  8. 【iOS 7】使用UIScreenEdgePanGestureRecognizer实现swipe to pop效果

    在iOS 7还没有发布的时候,各种App实现各种的swipe to pop效果,比如这里有一份简单的demo. 在iOS 7上,只要是符合系统的导航结构: - (BOOL)application:(U ...

  9. SQL GROUP BY GROUPING SETS,ROLLUP,CUBE（需求举例）

    实现按照不同级别分组统计 关于GROUP BY 中的GROUPING SETS,ROLLUP,CUBE 从需求的角度理解会更加容易些. 需求举例: 假如一所学校只有两个系, 每个系有两个专业, 每个专 ...

  10. Spring 4.x org.springframework.http.converter.json.MappingJacksonHttpMessageConverter ClassNotFoundException:

    Spring 4.x The first major version of Jackson is no longer supported in Spring 4. The class you want ...