今天讲了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. Html 上手

    <!-- ctrl + / 注释 ctrl + D 复制整行 html:超文本标记语言标记 标签 元素格式<标签名>标签内容</标签名>标签的写法标签的正确嵌套标签特性 ...

  2. shell 入门基础

    一. Shell变量 1. 变量可分为两类: 环境变量(全局变量) 和 局部变量 . 环境变量 : 所有的环境变量都是系统全局变量,可用于所有子进程中,这包括编辑器.shell脚本和各类应用 . 环境 ...

  3. Android SQLite最简单demo实现(增删查改)

    本来不太想写这篇博客的,但是看到网上的关于android数据库操作的博文都讲得很详细,对于像我这样的新手入门了解SQLite的基本操作有一定难度,所以我参考了网上的一些博客文章,并自己亲自摸索了一遍, ...

  4. linux系统构架 - LB集群之LVS的DR设置

    在lvs的nat模式的基础上 1.清空ipvsadm规则 ipvsadm -C 查看 ipvsadm -ln 2.清空iptables规则 iptables -t nat -F 3.修改rs的网卡配置 ...

  5. 黑暗之光 Day2

    1. 鼠标点击UI检测 UICamera.isOverUI 2. 鼠标指针管理 public class CussorManager : MonoBehaviour { public static C ...

  6. mysql 如何清除sql缓存

    对一条sql进行优化时,发现原本很慢的一条sql(将近1分钟) 在第二次运行时, 瞬间就完成了(.00sec) 这是因为mysql对同一条sql进行了缓存,服务器直接从上次的查询结果缓存中读取数据,而 ...

  7. VIM-美化你的标签栏

    vim的标签栏是一个比较有用的功能,我们可以通过gt和gT快捷键前后切换标签页,也可以用数字+gt的方式,快速跳转到某个标签页,但是默认的标签栏上标签序号并没有显示出来,在标签页较多的时候,想要通过数 ...

  8. apktool.bat

    @echo off if "%PATH_BASE%" == "" set PATH_BASE=%PATH% set PATH=%CD%;%PATH_BASE%; ...

  9. VUE+WebPack游戏设计:欲望都市城市图层的设计

  10. Unity strip engine code 遇到執行不能之問題與解決

    遊戲發布在 WebGL 平台發現檔案還是太大,因此在 IL2CPP 的環境下,開啟 Strip engine code 編譯功能,嘗試看看能不能減少一些檔案容量. 但由於我們另外有載入 Scene s ...