<!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. 学习EXTJS6（3）基本概念

    ExtJS不再纠缠HTML和CSS上.概念和传统的程序相近.如面板panel,布局Layout.组件Component等等. 1.渲染Render:ExtJS页面在浏览器中装载完成后完全展现出来的一个 ...

  2. WordPress TinyMCE 编辑器增强技巧大全

    说到WordPress自带的TinyMCE 编辑器,有些国人总是不太满意.针对这个情况,倡萌已经介绍了一些增强或替代的方法: WordPress编辑器增强插件:TinyMCE Advanced Wor ...

  3. POJ 1474

    半平面交模板 #include <iostream> #include <cstdio> #include <cstring> #include <algor ...

  4. 赵雅智_ListView_SimpleAdapter

    项目步骤 声明listView控件并获取显示的视图 获取显示的数据 设置显示的adapter 注冊点击事件 详细案例 实现效果: 查找的方法 public List<Map<String, ...

  5. 根据图片url地址获取图片的宽高

    /** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...

  6. Linux命令（五）——磁盘操作及文件系统的管理

    文件系统是所有文件夹和文件的基础,磁盘是文件系统的基础,文件系统以磁盘为基础存储文件. 一.linux文件系统类型 1.ext扩展文件系统/ext2二级扩展文件系统/ext3日志式文件系统(默认) 2 ...

  7. Eclipse开启代码自动提示功能

    Eclipse代码里面的代码提示功能默认是关闭的,只有输入“.”的时候才会提示功能,用vs的用户可能不太习惯 这种,vs是输入任何字母都会提示,下面说一下如何修改eclipse配置,开启代码自动提示功 ...

  8. Adding a model

    https://docs.asp.net/en/latest/tutorials/first-mvc-app/adding-model.html Adding data model classes I ...

  9. My first blog for java

    我的第一个java程序: package com.hellojava; /** * @author 沽-名-钓-誉 */ public class HelloJava{ /** * @param 输出 ...

  10. POJ 2492 A Bug's Life 带权并查集

    题意: 思路: mod2 意义下的带权并查集 如果两只虫子是异性恋,它们的距离应该是1. 如果两只虫子相恋且距离为零,则它们是同性恋. (出题人好猥琐啊) 注意: 不能输入一半就break出来.... ...