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----1165Eddy's research II
Eddy's research II Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- NYOJ-------三角形
Problem A 三角形 时间限制:1000 ms | 内存限制:65535 KB 描述 在数学中,如果知道了三个点的坐标,我们就可以判断这三个点能否组成一个三角形:如果可以组成三角形,那么 ...
- HttpClient中的Timout
connection timeout和SoTimeout A connection timeout occurs only upon starting the TCP connection. This ...
- JavaScript 设计模式之命令模式
一.命令模式概念解读 1.命令模式概念文字解读 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用 ...
- &&和;和||符号的意思
http://www.cnblogs.com/xuxm2007/archive/2011/01/16/1936836.html在命令行可以一次执行多个命令,有以下几种: 1.每个命令之间用;隔开 ...
- Debian/Ubuntu架设nginx+bugzilla
题注 最近需要一个简单快速的bug追踪工具,考虑到系统环境以及学习成本,决定采用bugzilla.不试不知道,原来这里面还有这么多的坑需要一个个踩平~,遂随笔一下以备后用. 我采用的系统组成是debi ...
- LevelDB场景分析4--BackgroundCompaction
1.DBImpl::Open uint64_t new_log_number = impl->versions_->NewFileNumber(); WritableF ...
- malloc/free 与 new/delete 比较
相同点:都可用于申请动态内存和释放内存 不同点: (1)操作对象有所不同. malloc与free是C++/C 语言的标准库函数,new/delete 是C++的运算符.对于非内部数据类的对象而言,光 ...
- python map 详解
python中的map函数应用于每一个可迭代的项,返回的是一个结果list.如果有其他的可迭代参数传进来,map函数则会把每一个参数都以相应的处理函数进行迭代处理.map()函数接收两个参数,一个是函 ...
- 【转】js frame 框架编程
源地址:http://www.blogjava.net/lusm/archive/2008/02/11/179620.html 1 框架编程概述 一个Html 页面可以有一个或多个子框架,这些子框架以 ...