第三天：JavaScript的DOM对象和DOM操作HTML
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"; //获得ｉｄ 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的更多相关文章
- 第一百一十四节，JavaScript文档对象，DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 第三章JavaScript 内置对象
1 Number 1.1 属性 MAX_VALUE JS可以表示的最大的数字 MIN_VALUE JS可以表示的最小的数字 1.2 方法 toFixed(length) 指定保留长度的小数 toExp ...
- JS-jquery对象和dom对象的属性操作区别
<label class="">时间1</label> <label class="">时间2</label> ...
- JQuery $ $.extend(),$.fn和$.fn.extend javaScript对象、DOM对象和jQuery对象及转换 工具方法(utility)
一.为什么jquery前面要写$ Javascript没有package的概念,而作者又希望所有jQuery相关的API都能通过一个全局性的对象来容纳. 名为jQuery的全局变量就是这样一个对象,不 ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- 锋利的jQuery--jQuery与DOM对象的互相转换，DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- jquery对象和javascript的dom对象转换
Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...
- [jQuery]jQuery和DOM对象(三)
iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...
随机推荐
- MyBatis Generator中文文档
MyBatis Generator中文文档 MyBatis Generator中文文档地址: http://mbg.cndocs.tk/ 该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看 ...
- boost timer代码学习笔记
socket连接中需要判断超时 所以这几天看了看boost中计时器的文档和示例 一共有五个例子 从简单的同步等待到异步调用超时处理 先看第一个例子 // timer1.cpp: 定义控制台应用程序的入 ...
- samtools flagstat
samtools flagstat命令简介: 统计输入文件的相关数据并将这些数据输出至屏幕显示.每一项统计数据都由两部分组成,分别是QC pass和QC failed,表示通过QC的reads数据量和 ...
- c#的装箱和拆箱及值类型和引用类型
装箱:它允许根据值类型创建一个对象,然后使用对这新对象的一个引用. int i = 5; object o = i; int j = (int)o; 装箱:运行时将在堆上创建一个包含值5的对象(它是一 ...
- unity3d的执行顺序
- 【转】使用PHP导入和导出CSV文件
项目开发中,很多时候要将外部CSV文件导入到数据库中或者将数据导出为CSV文件,那么具体该如何实现呢?本文将使用PHP并结合mysql,实现了CSV格式数据的导入和导出功能.我们先准备mysql数据表 ...
- 2018.12.12 codeforces 938E. Max History（组合数学）
传送门 唉最开始居然把题给看错了. 其实是组合数学傻逼题呢. 题意简述:给出一个数列,定义一个与数列有关的fff函数,fff函数定义如下: 首先f=0,M=1f=0,M=1f=0,M=1,一直重复如下 ...
- 下载安装mysql的一些坑
在mysql下载安装的过程中会有一些坑,另外navicat连接mysql数据库时也存在一定的坑,总结如下: 1.计算机中丢失某个dll文件 这个问题好解决,下载个文件就搞定了,下载地址:https:/ ...
- $.cookie is not a function的错误原因
网上说的原因是:“手残导入2次jquery库文件 ” 是的,就是这个原因.引入了两次jquery.js
- Codeforces Round #510 (Div. 2) D. Petya and Array(离散化+反向树状数组）
http://codeforces.com/contest/1042/problem/D 题意 给一个数组n个元素,求有多少个连续的子序列的和<t (1<=n<=200000,abs ...