<!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. 微信系列之公众号Token验证

    微信系列之公众号Token验证 pycharm连接线上服务器开发 开发过程笔记 参考资料 python3安装web.py可以选择安装`pip install web.py==0.40.dev0 pyc ...

  2. BZOJ 3119 Book (贪心+数学推导)

    手动博客搬家: 本文发表于20191029 22:49:41, 原地址https://blog.csdn.net/suncongbo/article/details/78388925 URL: htt ...

  3. POJ 2019 Cornfields 二维线段树的初始化与最值查询

    模板到不行.. 连更新都没有.. .存个模板. 理解留到小结的时候再写. #include <algorithm> #include <iostream> #include & ...

  4. uva live 6827 Galaxy collision

    就是给出非常多点,要求分成两个集合,在同一个集合里的点要求随意两个之间的距离都大于5. 求一个集合.它的点数目是全部可能答案中最少的. 直接从随意一个点爆搜,把它范围内的点都丢到跟它不一样的集合里.不 ...

  5. BAT常问问题总结以及回答（数据库篇）

    数据库 事务四大特性(ACID)原子性.一致性.隔离性.持久性 事务:所谓事务,它是一个操作序列,这些操作要么都执行,要么都不执行,它是一个不可分割的工作单位.begin transaction  原 ...

  6. ScalaChina: Scala中文社区

    给大家推荐一个很常使用心的Scala中文社区 ScalaChina地址:http://scalachina.org/ 来自社区创建者的<我为什么想做ScalaChina>: http:// ...

  7. 初探swift语言的学习笔记三(闭包－匿名函数)

    作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/29353019 转载请注明出处 假设认为文章对你有所帮助,请通过留言 ...

  8. cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第0步---知识点总结&amp;效果预览&amp;设计思路

    /* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏.这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写.第一别全然照搬代码:第二能够说 ...

  9. Objective-c基础知识学习笔记

    Objective-c基础知识学习笔记(一) 一直有记录笔记的习惯.但非常久没分享一些东西了,正好上半年開始学习IOS了,如今有空写点.因开发须要,公司特意为我们配置了几台新MAC.还让我们自学了2周 ...

  10. Android开机键失灵启动手机的解决的方法

    问题描写叙述 Android手机的关机键损坏,无法开机. 解决方法 将手机通过USB线链接电脑,进入命令行.找到adb命令所在文件夹.执行例如以下命令: adb reboot 注意:用这样的方法的前提 ...