今天讲了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. 源码安装nginx

    #!/bin/bash #安装nginx依赖 apt-get update apt-get install -y make apt-get install -y gcc apt-get install ...

  2. Timestamp类型浅析

    Oracle针对不同的数据需求,提供了多种类.多层次的数据类型体系.我们在实际应用中,最好可以依据业务数据的实际形态和前端应用的语言.框架特性来确定字段类型的选择. Date类型是我们经常使用的时间类 ...

  3. 新版台式机安装win7操作系统

    1.进入bios设置-----authentication选项中的secure boot设置为disabled2.在boot options选项中launch csm设置为always 3.在boot ...

  4. SpringBoot+rest接口+swagger2生成API文档+validator+mybatis+aop+国际化

    代码地址:JillWen_SpringBootDemo mybatis 1. 添加依赖: <dependency> <groupId>org.mybatis.spring.bo ...

  5. 一个简单的语义分析算法:单步算法——Python实现

    以前 曾经有一个人教会我一件事 要学会相信一些看似不可能的事  当你真的相信的时候  或许 没有什么事情是不可能的 ——<秦时明月•与子同归> 在编译原理的众多书籍中,陈述了很多生成语法树 ...

  6. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 12—Support Vector Machines 支持向量机

    Lecture 12 支持向量机 Support Vector Machines 12.1 优化目标 Optimization Objective 支持向量机(Support Vector Machi ...

  7. Elasticsearch-PHP 快速开始

    快速开始 本章节会给你一个客户端的主要功能(函数)是如何工作的快速概述. 安装 引入(包含)elasticsearch-php 在你的 composer.json 文件: { "requir ...

  8. Spring IOC基础

    2.1.1 IOC是什么IOC—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想.在Java开发中,IOC意味着将你设计好的对象交给容器控制,而不是传统的在你的 ...

  9. WCF配置Tcp协议

    注意点: 1,<serviceMetadata httpGetEnabled="false"/>   2,       <services>         ...

  10. (转)libvirt API的基本概念

    本文摘自:http://blog.sina.com.cn/s/blog_da4487c40102v31i.html libvirt对象 libvirt的对象向外展现了虚拟化环境的所有资源.libvir ...