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方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...
随机推荐
- HDUOJ--------（1312）Red and Black
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
- android直接读取项目中的sqlite数据库
最近项目中要实现android读取sqlite数据库文件,在这里先做一个英汉字典的例子.主要是输入英语到数据库中查询相应的汉语意思,将其答案输出.数据库采用sqlite3. 如图: 实现过程完全是按照 ...
- 记录VSCode开发React Native的一些坑
当我们点Debug Android时,会弹出以下错误 Could not debug. Unable to set up communication with VSCode react-native ...
- Unix环境高级编程(十九)终端I/O
终端I/O应用很广泛,用于终端.计算机之间的直接连线.调制解调器以及打印机等等.终端I/O有两种不同的工作模式: (1)规范模式输入处理:终端输入以行为单位进行处理,对于每个读要求,终端驱动程序最多返 ...
- C# 查看动态库的方法
使用Vs自带工具:开始菜单-->Microsoft Visual Studio 2010--> Visual Studio Tools-->Visual Studio 命令提示符 输 ...
- hdu 4961 Boring Sum(高效)
pid=4961" target="_blank" style="">题目链接:hdu 4961 Boring Sum 题目大意:给定ai数组; ...
- nginx php-fpm 输出php错误日志（转）
nginx是一个web服务器,因此nginx的access日志只有对访问页面的记录,不会有php 的 error log信息. nginx把对php的请求发给php-fpm fastcgi进程来处理, ...
- java的IO总结（一）
Java的IO流是实现输入输出的基础,这里所说的流就是数据流,大部分的与流相关的类放在Java.io包下. 一,Java的流分类 按照不同的分类方式可以把流分成不同的类型,下面我们从不同的角度对流进行 ...
- 使用.net的跟踪诊断来记录wcf消息
首先在项目的config文件中定义以下结点: <system.diagnostics> <sources> <source name="System.Servi ...
- Linux下nagios网络监控与/proc/net/tcp文件详解
问题描述:nagios自带的check_antp太过简约,除了状态统计输出外,什么参数都不提供.在面对不同应用服务器时,报警就成了很大问题. 问题描述:nagios自带的check_antp太过简约, ...