今天讲了js的组成部分中的第二组成部分(DOM),DOM包括以下内容:

window    -- 窗口
                                                   location -- 地址栏
                                                   history  -- 历史记录
                                                   document  --文档
                                                   statue      -- 任务栏

其中着重讲了document--文档
                                            1. 找到元素方法: 
                                                                  getElementById();       (“id名”)   得到一个
                                                                  getElementsByName();        (“name名”)是数组
                                                                  getElementsByClassName();            (“class名”)是数组
                                                                  getElementsByTagName();                   (标签名比如,div)是数组
                                           2.元素的属性             1)非表单元素内容属性:  innerHTML
                                                                             2)表单元素内容属性:     value

练习题

1  点击提示修改本身的值吗  弹窗接受输入的值  修改本元素内容

function three(){
var a=confirm("修改本身的值吗"),
b=prompt("输入的值");
document.getElementById("bb").innerHTML=b }
<button id="aa" onClick="three()">修改本身的值吗</button>

2

3个按钮  接受3个值  分别给他们赋值  for

function four(obj){

		for(var i=0;i<3;i++){
//obj.innerHTML=prompt("请输入一个值")
document.getElementsByName("aaa")[i].innerHTML=prompt("请输入一个数")
}
}
<button name="aaa" onClick="four(this)">点我</button> <button name="aaa" onClick="four(this)">快点</button>
<button name="aaa" onClick="four(this)">小不点</button>

3图片轮播

 var a=1;
function five(type){ document.getElementById("divimg").innerHTML='<img src="img/'+a+'.jpg">' if(type=='shang'){
a--;
if(a==0){
a=5
}
}
else{
a++;
if(a==5){
a=1
}
} } function one(val){ document.getElementById("divimg").innerHTML = '<img src="img/'+val+'.jpg">' }
}
<div id="divimg"><img src="img/1.jpg"></div> <button onClick="five('shang')">上一张</button>
<a onClick="one(1)" href="#">1</a>
<a onClick="one(2)" href="#">2</a>
<a onClick="one(3)" href="#">3</a>
<a onClick="one(4)" href="#">4</a>
<a onClick="one(5)" href="#">5</a>
<button onClick="five('xia')">下一张</button>

10.13DOM中document--文档1找到元素的方法,还有元素内容属性的更多相关文章

  1. 孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档

    孤荷凌寒自学python第五十四天使用python来删除Firebase数据库中的文档 (完整学习过程屏幕记录视频地址在文末) 今天继续研究Firebase数据库,利用google免费提供的这个数据库 ...

  2. 在SharePoint 2013 中使用文档库Scheduling (计划公布功能)

    本文讲述在SharePoint2013 中使用文档库Scheduling (计划公布功能)的步骤和注意的事项. 文档库Scheduling (计划公布功能) 用于设定当文档通过审批后特定的时间区间内才 ...

  3. MongoDB学习(操作集合中的文档)

    文档概念 文档的数据结构和JSON基本一样. 所有存储在集合中的数据都是BSON格式. BSON是一种类json的一种二进制形式的存储格式,简称Binary JSON. 插入文档 insert()方法 ...

  4. 操作Document文档

    利用客户端操作Document文档数据 1.创建一个文档(创建数据的过程,向表中去添加数据) 请求方式:Post 请求地址:es所在IP:9200/索引库/Type/文档ID(可给可不给,代表唯一标识 ...

  5. MongoDB(5)- Document 文档相关

    Documents MongoDB 的文档可以理解为关系型数据库(Mysql)的一行记录 MongoDB 将数据记录为 BSON 格式的文档 BSON 是 JSON 文档的二进制表示,但它支持的数据类 ...

  6. 从单一图像中提取文档图像:ICCV2019论文解读

    从单一图像中提取文档图像:ICCV2019论文解读 DewarpNet: Single-Image Document Unwarping With Stacked 3D and 2D Regressi ...

  7. MongoDB(10)- 查询嵌套文档

    插入测试数据 db.inventory.insertMany( [ { item: "journal", qty: 25, size: { h: 14, w: 21, uom: & ...

  8. Solr 18 - 通过SolrJ局部更新Solr中的文档 (原子操作、非覆盖操作)

    目录 1 需求分析 2 需求实现 2.1 pom.xml依赖 2.2 Java代码示例 3 补充说明 3.1 关于文档中_version_的取值说明 3.2 store=true/false的区别 1 ...

  9. Elasticsearch操作Document文档

    1.利用客户端操作Document文档数据        1.1 创建一个文档(创建数据的过程,向表中去添加数据)            请求方式:Post    请求地址:es所在IP:9200/索 ...

随机推荐

  1. OD 实验(六) - 对一个程序的破解

    程序: 双击进行安装,安装过程默认就好了 安装完成 运行程序 输入 User 为 sch01ar,点击 Create 点击 Log In 这里显示为未注册版本 看看未注册版本有哪些功能被限制 这里会显 ...

  2. 20_java之集合Map

    01Map集合概述 A:Map集合概述: 我们通过查看Map接口描述,发现Map接口下的集合与Collection接口下的集合,它们存储数据的形式不同  a:Collection中的集合,元素是孤立 ...

  3. 大数据,物联网(Internet of Things),万物互联网(Internet of Everything),云计算,雾计算,边缘计算(Edge Computing) 的区别和联系

    大数据是一种规模大到在获取.存储.管理.分析方面大大超出了传统数据库软件工具能力范围的数据集合,具有海量的数据规模.快速的数据流转.多样的数据类型,高价值性和准确性五大特征,即5V(Volume, V ...

  4. 36种漂亮的CSS3网页按钮Button样式

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. [转载]用 FFMPEG 合并 MP4 视频

    因为 ffmpeg 是支持切分 mp4 视频的,所以我就理所当然的以为 ffmpeg 是支持视频合并.直到今天同事找我问方法,才发现一直以为的方法是错误的, mp4 不支持直接 concate(丢人了 ...

  6. Kettle中配置oracle RAC

    由于项目中使用了oracle v-ip做了oracle数据库集群,现在需要把项目中程序进行升级. 原来的程序中直接使用的是JDBC然后配置的kettle.properties配置文件,如下图: 根据项 ...

  7. F5负载均衡架构图

    原文:https://blog.csdn.net/qq_35611533/article/details/51917279?locationNum=1&fps=1

  8. map的访问

    映射表(map) 在每个条目被插入时将之按键进行排序.取迭代器指向值时将返回value_type结构,它有两个数据成员:first,second.访问first获得键的数据,访问second获得值的数 ...

  9. sql中经度维度计算距离

    ------------------------------------------创建一个方法---------------------------------------------------- ...

  10. iOS设计模式(01):观察者

    iOS设计模式(01):观察者 iOS-Observer-Pattern 什么是观察者模式 什么是观察者模式?你曾经订阅过报纸吗?在订阅报纸的时候,你不用去任何地方,只需要将你的个人地址信息以及订阅信 ...