1. DOM操作HTML

1)注意:绝对不要在文档加载完成之后使用docment.write()。这样会覆盖原来的文档

<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p> <button onclick="aaa()">按钮</button> </body>
<script>
function aaa(){
document.write("world");
}
</script> 运行结果:

2)寻找元素:

通过id寻找html元素

<body>
<p id="pid">hello</p>
<button onclick="demo()">按钮</button> </body>
<script>
function demo(){
var nv=document.getElementById("pid").innerHTML="ws"; //获得id  nv.innerHTML="world"; //通过innerHTML改变html内容
}
</script>

通过标签名寻找html元素

document.getElementsByTagName("p") 

修改属性

1)修改链接地址:修改属性href
<body>
<a id="aid" href="http://www.baidu.com">hello</a> <button onclick="demo()">按钮</button> </body>
<script>
function demo(){
document.getElementById("aid").href="http://mail.163.com"; }
</script> 2)修改图片,属性src
<body>
<img id="iid" src="0.png">
<button onclick="demo()">按钮</button>
</body>
<script>
function demo(){
document.getElementById("iid").src="1.png";
}
</script>
我容易犯的错误,赋值后面忘记加双引号, 未通过id关联,未通过函数关联

问题:不会用 

  通过标签名寻找html元素

document.getElementsByTagName("p") 

第三天:JavaScript的DOM对象和DOM操作HTML的更多相关文章

  1. 第一百一十四节,JavaScript文档对象,DOM进阶

    JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...

  2. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  3. 第三章JavaScript 内置对象

    1 Number 1.1 属性 MAX_VALUE JS可以表示的最大的数字 MIN_VALUE JS可以表示的最小的数字 1.2 方法 toFixed(length) 指定保留长度的小数 toExp ...

  4. JS-jquery对象和dom对象的属性操作区别

    <label class="">时间1</label> <label class="">时间2</label> ...

  5. JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)

    一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...

  6. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  7. 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)

    1.jQuery对象就是通过jQuery包装DOM对象后产生的对象.   2.jQuery对象和DOM对象的相互转换.   良好的书写风格: var $input=$("input" ...

  8. jquery对象和javascript的dom对象转换

    Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...

  9. [jQuery]jQuery和DOM对象(三)

    iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...

随机推荐

  1. Windows 下 Phpstrom 配置git使用

    首先先去下载 git 下载链接 https://git-scm.com/download/winphpstrom 配置git    链接  http://jingyan.baidu.com/artic ...

  2. python爬虫之urlError异常处理

    1.URLError URLError产生的原因: (1)网络无连接,即本机无法上网 (2)连接不到特定的服务器 (3)服务器不存在 import urllib.request import urll ...

  3. 当前页面刷新和动态添加控件的jquery事件绑定on

    当前页面刷新(console): location.reload() 给动态添加的控件添加js事件(委托): <ul> <li>菜单一</li> <li> ...

  4. JSTL(JSP标准标签库)

    JSP标准标签库(JavaServer Pages Tag Library, JSTL)是一个定制JSP标签库的集合,封装了JSP应用的通用核心功能.用来解决像遍历Map或集合.条件测试.XML处理, ...

  5. java如何实现发邮件功能。

    http://blog.sina.com.cn/s/blog_59ca2c2a01013800.html http://www.cnblogs.com/xdp-gacl/p/4216311.html

  6. OneZero第三周第三次站立会议(2016.4.6)

    1. 时间: 13:05--13:15  共计10分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...

  7. Magpie

    https://github.com/LLNL/magpie Magpie contains a number of scripts for running Big Data software in ...

  8. python使用Fabric模块实现自动化运维

    简介:Fabric是基于Python实现的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包括:命令执行.文件上传.下载及完整 ...

  9. mybatis 使用merge into

    前一篇博客,oracle的merge into语法 : oracle merge into语法 mybatis 使用merge into,跟一般的update写法相同: <update id=& ...

  10. mysql字符串类型数据

    字符串类型是在数据库中存储字符串的数据类型,字符串类型包括char,varchar,text,enum和set. OK,我们来一个一个的看下上面提到的几种类型. char类型和varchar类型 ch ...