<!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>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

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

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

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

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

        <div class="four">5</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 : id名字

    //通过id名找到元素

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

    //通过name属性，找到元素

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

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

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

    //console.log(three[]);

    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;j++) {

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

        }

        str = str +"</tr>";

    }

    tab[0].innerHTML = str;

    //3.操作表单的value

    var inpt = document.getElementById("two");

    alert(inpt.value);

</script>

DOM的查找与操作的更多相关文章

  1. HTML DOM元素关系与操作

    <html> <head><title>DOM元素关系与操作</title></head> <body> <!-- div ...

  2. JavaScript基础DOM介绍和常用操作（5）

    day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...

  3. 使用Dom解析器，操作XML里面的信息

    import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...

  4. Java进阶(三十九)Java集合类的排序,查找,替换操作

    Java进阶(三十九)Java集合类的排序,查找,替换操作 前言 在Java方向校招过程中,经常会遇到将输入转换为数组的情况,而我们通常使用ArrayList来表示动态数组.获取到ArrayList对 ...

  5. lavarel数据库查找别名操作

    lavarel数据库查找别名操作 一.总结 一句话总结: 当有表前缀的时候:DB::table('users as table1')->select(DB::raw('table1.id'))- ...

  6. JS操作DOM节点查找

    JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找. <script> window.onload = function(){ //children ...

  7. DOM的查找，新增，删除操作

    查找 1. document.getElementById()  通过ID获取元素,由于ID唯一,所以获取的是一个元素 2. document.getElementsByTagName() 通过标签名 ...

  8. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  9. DOM元素查找

    一.DOM是document的缩写,他是操作html文档的方法 二.常用查找元素的方法 直接 1.document.getElementById('标签的id')   在html中标签的id是不允许重 ...

随机推荐

  1. 【hash】【P5079】P5079 Tweetuzki 爱伊图

    Description Input 第一行两个正整数 \(r~,~c\),表示矩阵的行数和列数. 接下来 \(r\) 行,每行输入 \(c\) 个字符,用空格隔开,保证只含有 . 和 # 两种字符.输 ...

  2. 服务器上的 Git - 在服务器上搭建 Git

    http://git-scm.com/book/zh/v2/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E7%9A%84-Git-%E5%9C%A8%E6%9C%8D%E ...

  3. SQL Server 2008自动备份数据库

    1.在电脑开始菜单中选择“SQL Server Management Studio”双击.在出现的界面中点击“连接”按钮. 2.在出现的“ Microsoft SQL Server Managemen ...

  4. Android图片压缩工具MCompressor

    这是一个简单的图片压缩工具(MCompressor),可自定义压缩的格式和质量,以及压缩后存储的文件路径,可决定对多大的文件进行压缩. 使用方法 build.gradle文件 Step 1. Add ...

  5. 教你破解MyEclipse到2016年【图文详解】

    1.首先确定JDK以及环境变量没有问题.因为破解工具包里的run.bat是调用java命令执行jar包,如果环境变量没有配置好,那就运行不了了.2.解压破解包,双击[run.bat]打开破解界面: 3 ...

  6. HDU 6206 青岛网络赛1001 高精度 简单几何

    给出的数据1e12规模,常规判点是否在圆范围内肯定要用到半径,求得过程中无法避免溢出,因此用JAVA自带的浮点大数运算,和个ZZ一样比赛中eclipse出现问题,而且太久没写JAVA语法都不清楚变量忘 ...

  7. 笔记（二）TabLayout + ViewPager + FragmentPagerAdapter 组合用法

    TabLayout的xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  8. Shell编程——bash基础知识

    # Bash中自动补全时忽略大小写 # 编辑~/.inputrc(没有的话,就新建一个),在最后加一行: set completion-ignore-case on # 若要用方向键Up,Down来搜 ...

  9. JS操作CSS随机改变网页背景

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 1 2 3 4 ...

  10. 【BZOJ】4555: [Tjoi2016&Heoi2016]求和 排列组合+多项式求逆 或 斯特林数+NTT

    [题意]给定n,求Σi=0~nΣj=1~i s(i,j)*2^j*j!,n<=10^5. [算法]生成函数+排列组合+多项式求逆 [题解]参考: [BZOJ4555][Tjoi2016& ...