<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id=""one"></div>

        <input type="text" name="two" id="two" value="123" />

        // name = value

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <div class="four"></div>

        <div class="four"></div>

        <div class="four"></div>

        <div class="four"></div>

        <div class="four"></div>

        <div id="five">

            今天晴天

        </div>

        <table border="1" cellspacing="0" cellpadding="0">

        </table>

    </body>

</html>

<script type="text/javascript">

//           找到dom元素

//document   文档

//get 拿到 得到

//element  元素

// by 通过

//通过id名找到元素

var one = document.getElementById("one");

//通过name属性 找到元素

var two = document.getElementsByName("two");

//通过标签名找到元素 HTMLCollection  集合

 var three = document.getElementsByTagName("li");

 //console.log(three[0])

 // 0: <li>

  //  1: <li>

   // 2: <li>

    //3: <li>

 //   4: <li>

  //  length:5

   var four = document.getElementsByClassName("four");

   //              操作dom元素

   //一：操作内容

   var five = document.getElementById("five");

   //1、five.innerHTML = "今天<br/>阴天"

   //2、five.innerText = "今天<br/>阴天"

   //打印表格  练习

   var tab = document.getElementsByTagName("table");

   var str = ""

   for(var i = 0;i < 3;i++){

       str = str+"<tr>"

       for(var j = 0;j<3;++){

           str = str + "<td>周一</td>"

       }

       str = str + "</tr>"

   }

   tab[0].innerHTML = str;

   //3、操作表单的value

   var inpt = document.getElementById("two")

   alert(inpt.value);

</script>

JA document的练习的更多相关文章

  1. PC京东登录页分析 curl

    w 正确的组合,没有显示新页面的数据. <!doctype html> <html> <head> </head> <?php include(' ...

  2. document.documentElement.clientHeight 与 document.body.clientHeight(杜绝千篇一律的抄袭!!)

    document.documentElement.clientHeight 与 document.body.clientHeight用来获取页面可视高度我觉得有点问题.这两个应该不是一个东西. 页面中 ...

  3. jquery中的$(document).ready(function() {});

    当文档载入时执行function函数里的代码, 这部分代码主要声明,页面加载后 "监听事件" 的方法.例如: $(document).ready( $("a") ...

  4. document.compatMode

    在我电脑屏幕上显示的 电脑是 1920*1080这是在document.compatMode:css1Compat模式 window.screen.availWidth 1920 window.scr ...

  5. 谈谈document.ready和window.onload的区别

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

  6. Windows.document

    一.找到元素: document.getElementById("id");根据id找,最多找一个 var a =document.getElementById("id& ...

  7. Error on line -1 of document : Premature end of file. Nested exception: Premature end of file.

    启动tomcat, 出现, ( 之前都是好好的... ) [lk ] ERROR [08-12 15:10:02] [main] org.springframework.web.context.Con ...

  8. JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)

    1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与 ...

  9. $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 ...

随机推荐

  1. vue 对图片进行拖拽到另一个位置

    1.拖动元素代码: 使用html5原生拖拽属性,在需要拖拽的图片中添加draggable="true"属性,并使用v-on添加拖动事件 2.被放置的区域事件代码: 使用html5原 ...

  2. 2013 - lost connection to mysql server at 'reading initial communication packet' 连接mysql报错

    早上刚到公司,启动项目发现连接池初始化报错,于是我打开本地mysql管理工具,测试是否可以连接.报错2013代码: 现已解决. 重启服务器mysql服务就好. 因为我连接的是本地windows系统,所 ...

  3. UOJ #219 BZOJ 4650 luogu P1117 [NOI2016]优秀的拆分 (后缀数组、ST表)

    连NOI Day1T1都不会做...看了题解都写不出来还要抄Claris的代码.. 题目链接: (luogu)https://www.luogu.org/problemnew/show/P1117 ( ...

  4. linux下Qt程序编译运行

    Qt程序编译运行很简单,利用Qt提供的qmake工具可以很好的进行编译,在命令行输入一下编译过程:qmake -project    //声称项目文件(*.pro)qmake              ...

  5. elasticsearch 分布式阅读笔记(二)

    说明 扩展分为 纵向扩展:购买更好的服务器 横向扩展:增加服务器(elasticsearch更适合横向扩展) elasticsearch可以用于构建高可用和可扩展的系统,elasticsearch天生 ...

  6. 转载 - KMP算法祥解

    出处:http://www.cppblog.com/oosky/archive/2006/07/06/9486.html KMP字符串模式匹配详解 来自CSDN     A_B_C_ABC 网友 KM ...

  7. [bzoj1070][SCOI2007]修车_费用流

    修车 bzoj-1070 SCOI-2007 题目大意:有m个人要修n台车,每个工人修不同的车的时间不同,问将所有的车都修完,最少需要花费的时间. 注释:$2\le m\le 9$,$1\le n \ ...

  8. CSP介绍、以及使用CryptoAPI枚举CSP并获取其属性

    CSP,全名为"加密服务提供者(Cryptographic Service Provider)",是微软定义的一套password服务API.眼下经常使用的password规范或者 ...

  9. 一次获取多个oracle序列值

    一次获取多个oracle序列值 学习了:http://blog.csdn.net/wangchsh2008/article/details/53495961 select seq_one.nextva ...

  10. MySQL改动rootpassword的多种方法

     方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newp ...