JavaScrip——DOM操作（查找HTML元素/修改元素）
innerHTML
1、查找元素——document.getElementById("intro")
2、输出查找的结果：
(1)var a=document.getElementById("intro");
document.write(a.innerHTML);
(2) <div id="me"><b>试试吧</b></div>
var b=document.getElementById("me");
document.write(b.innerHTML);//write输出试试吧
alert(b.innerHTML)//alert输出的是<b>试试吧</b> 代码+文字
alert(b.innerText)//只输出文字——试试吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <body>
<p id="intro"><b>Hello World!</b></p><!--p代表段落 b是加粗 -->
<p>本例演示 <b>getElementById</b> 方法！</p> <div id="me"><b>试试吧</b></div>
</body>
</html>
<script>
//通过id来查找HTML中的元素
var a=document.getElementById("intro");
document.write(a.innerHTML); var b=document.getElementById("me");
document.write(b.innerHTML);//write输出试试吧
alert(b.innerHTML)//alert输出的是<b>试试吧</b> 代码+文字
alert(b.innerText)//只输出文字 b.innerHTML=" ";//赋个空字符串
b.innerHTML="<font color=red>我换了</font>";//重新设置内容 //改可以直接写成
/*var b=document.getElementById("me");
document.write(b.innerHTML="我换了")*/
</script>
结果为：
例子：通过p标签的id来获取内容并修改为新的内容
<!DOCTYPE html>
<html>
<body> <p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML="New text!";
</script> <p>上面的段落被一条 JavaScript 脚本修改了。</p> </body>
</html>
结果：
New text!
上面的段落被一条 JavaScript 脚本修改了。
再举例：
同样方法，只是写法不同
<!DOCTYPE html>
<html>
<body> <h1 id="header">Old Header</h1> <script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script> <p>"Old Header" 已被修改为 "New Header"。</p> </body>
</html>
New Header
"Old Header" 已被修改为 "New Header"。
再举一个，改变图片的：
<!DOCTYPE html>
<html>
<body> <img id="image" src="/i/eg_tulip.jpg" /> <script>
document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";
</script> <p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p> </body>
</html>
原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。
JavaScrip——DOM操作（查找HTML元素/修改元素）的更多相关文章
- jQuery使用(五)：DOM操作之插入和删除元素
插入: insertBofore() before() insertAfter() after() appendTo() append() prependTo() prepen() 删除: remov ...
- DOM操作（二）对元素的操作（创建，追加，删除）
1 创建新的 HTML 元素 (节点) var divDom=document.createElement('div'); 2 添加新元素到尾部 element.appendChild(para); ...
- JavaScrip——DOM操作（属性操作）
Attribute a.setAttribute("属性名","属性值")——设置属性 a.getSttribute("属性名")——获取属 ...
- jQuery 源码解析(二十三) DOM操作模块 替换元素 详解
本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value) ;使用提供的新内容来替换匹配元素集合中的每个元 ...
- Dom修改元素样式
提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style 行内样式的操作 2.element.className ...
- jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html) ;在每个匹配元素的外层添加一层DOM元素 ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
- JavaScript--DOM修改元素的属性
一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
随机推荐
- 为什么百度首页的HTML源代码最后一行要多一行？浪费空间呀！
为什么百度首页的HTML源代码最后一行要多一行?浪费空间呀!
- Calendar 中getActualMaximumd 功能
String str = (new SimpleDateFormat("yyyy-MM-dd HH:mm:ss:SSS")) .format(new Date()); Calend ...
- tomcat支持https的历程
tomcat真是业界良心啊,文档写的详细无比. 一.https是什么? 简单的说,就是http+SSL/TLS 协议还是http,但是在传输层过程中使用了加密(涉及握手.秘钥分发.加密.解密等过程). ...
- js的一些代码…
获取请求的参数 例:VisitPhoto.aspx?imgurl=http://s.cn.bing.net/az/hprichbg/rb/BottlenoseDolphinSurface_ZH-CN1 ...
- vim自定义插件放入pathogen管理
1.在.vim/bundle目录下,建立一个空目录,比如cscope 2.在cscope下面建立一个plugin文件夹 3.将自己写的vim文件放入plugin文件夹内就可以使用.
- XILINX XST综合的选项的含义
所谓综合,就是将HDL语言.原理图等设计输入翻译成由与.或.非门和RAM.触发器等基本逻辑单元的逻辑连接(网表),并根据目标和要求(约束条件)优化所生成的逻辑连接,生成EDF文件.完成了输入.仿真以及 ...
- 解决Pycharm中module 'pip' has no attribute 'main'的问题
背景:pip升级至10.0.1后,使用Pycharm安装Package时一直提示module 'pip' has no attribute 'main'报错信息. 解决方法: 找到Pycharm安装目 ...
- Oracle 每五千条执行一次的sql语句
今天碰到一个问题,更新历史数据时,由于数据库表数据量太大,单行更新速度很慢,要求每五千条执行一次提交进行更新.执行SQL如下: declare i_count int; i_large int; be ...
- Storm API,Tutorial,Trident,Windowing BOOKS
http://storm.apache.org/releases/1.0.0/Trident-API-Overview.html https://stackoverflow.com/questions ...
- tomcat的server.xml配置及context配置直接引用工程
server.xml配置简介 下面是这个文件中的基本配置信息,更具体的配置信息见tomcat的文档 server: port 指定一个端口,这个 ...