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方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
随机推荐
- [转载]SVN权限设置具体实例
原文地址:SVN权限设置具体实例作者:白菜豆腐 1 背景假设 厦门央瞬公司是一家电子元器件设备供应商,其中有个ARM部门,专门负责ARM芯片的方案设计.销售,并在北京.上海各设立了一个办事处.对于 ...
- [转载]打造自己喜欢的Linux桌面----archlinux
原文地址:打造自己喜欢的Linux桌面----archlinux作者:三尺椴 打造自己的Linux桌面----Archlinux 2011-01-16 文/s_cd ( 常用桌面组合:Archlin ...
- Bugtags 让你的 APP 测试轻松、上线安心
Bug 管理系统再进化 Bugtags 的创业团队,在过去几年,做了很多方向的尝试——没错,是开发了很多 APP. 每一轮迭代,都会被繁琐的 APP 测试困扰:无休止的截屏上传电脑,无数次的开发与测试 ...
- SQL SERVER SELECT语句中加锁选项的详细说明 [转]
SQL Server提供了强大而完备的锁机制来帮助实现数据库系统的并发性和高性能.用户既能使用SQL Server的缺省设置也可以在select 语句中使用“加锁选项”来实现预期的效果. 本文介绍了S ...
- 学习WCF笔记之二
一.学习文章http://www.cnblogs.com/iamlilinfeng/archive/2012/09/25/2700049.html 二.步骤 学习WFC,按照大神的文章一步步学习,不过 ...
- jquery中 $ 和 jQuery 及 $() 的区别
用过jquery的人都知道,jquery有两种用法,一种是$,还有一种是jQuery,那么这两种方式在使用上有什么区别呢? 答案是这两种用法没什么区别,只是别名而已,用$要比jQuery简短一些.方便 ...
- "Only the original thread that created a view hierarchy can touch its views.” 解决方法
这个主要总是,开启的线程和 UI 线程(主线程)不是同一个线程.可以Runnable方式避免,如下例所示就可以解决这个问题了. public static void updateText(Activi ...
- Spark Core Runtime分析: DAGScheduler, TaskScheduler, SchedulerBackend
Spark Runtime里的主要层次分析,梳理Runtime组件和运行流程, DAGScheduler Job=多个stage,Stage=多个同种task, Task分为ShuffleMapTas ...
- firefox os 会不会是未来移动平板及电视之星
随着2013年第一款firefox os 手机问世以来.Firefox os 系统手机已经经历过几次系统的更新,如今最新版本号的firefox os 为2.0版本号,只是如今的最新版本号还不是非常稳定 ...
- C# 动态获取代码所在行号
通过System.Diagnostics.StackTrace获取代码所在行号和文件信息 获取行号信息 /// <summary> /// Get line number of code ...