<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--
        使ie以IE8的模式运行
    -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
    <script type="text/javascript">

        /**
         * 得到页面元素节点的几种方式
         */

        //通过id选择器去得到
        function getDom01() {
            //获取一个
            var div = document.getElementById("box1");
            console.log(div);
        }

        //通过标签名得到元素
        function getDom02(){
            //会得到所有的 与名字相同的标签
            var divs =  document.getElementsByTagName("div");
            console.log(divs[0]);
        }
        //根据名字得到
        function getDom03(){
            //只能得到  原生就有name属性的元素  不能是自定义的
            var div = document.getElementsByName("box2");
            document.getElementsByClassName("box1");
            console.log(div[0]);
        }
        //IE7 以及以前的版本  不支持
        function getDom04(){
            var div = document.querySelector("#box1");
            console.log(div);
        }
        //IE7 以及以前的版本  不支持
        function getDom05(){
            var span = document.querySelectorAll(".box > span");
            console.log(span.length);
        }
    </script>
    <style type="text/css">
        .box{
            border: 1px solid red;
            width: 450px;
            height: 100px;
        }

        .box span{
            border-left: 1px solid green;
            border-right: 1px solid green;
            margin: 0 10px;
            padding: 0 5px;
        }
    </style>
</head>
<body>
<input type="button" onclick="getDom01()" value="getDom01"/>
<input type="button" onclick="getDom02()" value="getDom02"/>
<input type="button" onclick="getDom03()" value="getDom03" name="box2"/>
<input type="button" onclick="getDom04()" value="getDom04" name="box2"/>
<input type="button" onclick="getDom05()" value="getDom05" name="box2"/>
<hr/>
<div class="box" id="box1" name="box2">
    <span>this is a span in div</span>
    <span>this is a span in div</span>
    <span>this is a span in div</span>
    <span>this is a span in div</span>
</div>
</body>
</html>

js中获取页面元素节点的几种方式的更多相关文章

  1. 在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,

    前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发 ...

  2. Struts2中获取HttpServletRequest,HttpSession等的几种方式

    转自:http://www.kaifajie.cn/struts/8944.html package com.log; import java.io.IOException; import java. ...

  3. Action 中获取表单数据的三种方式

    (尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53138905  冷血之心的博客) Action 中获取表单提交数据 ...

  4. 示例 - 10行代码在C#中获取页面元素布局信息

    最近研究一个如何在网页定位验证码并截图的问题时, 用SS写了一段C#小脚本可以轻松获取页面任意元素的布局信息 (top, left, width, height). 10行功能代码, 觉得有点用, 现 ...

  5. Day20-单表中获取表单数据的3种方式

    1. 搭建环境请参考:http://www.cnblogs.com/momo8238/p/7508677.html 2. 创建表结构 models.py from django.db import m ...

  6. JS 中对变量类型判断的几种方式

    文章整理搬运,出处不详,如有侵犯,请联系~   数据类型判断和数据类型转换代码工具 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boo ...

  7. Activity启动过程中获取组件宽高的五种方式

    第一种:(重写Activity的onWindowFocusChanged方法) /** * 重写Acitivty的onWindowFocusChanged方法 */ @Override public ...

  8. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  9. JS中获取页面单选框radio和复选框checkbox中当前选中的值

    单选框:单选框的name值全部相同 页面有一组单选框的元素<td><input type="radio name="radioid">满意< ...

随机推荐

  1. Vue.js组件设计原则

    页面上把每个独立可以交互的区域视为一个组件 每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护 页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面

  2. POJ 1426 Find the Multiple 思路,线性同余,搜索 难度:2

    http://poj.org/problem?id=1426 测试了一番,从1-200的所有值都有long long下的解,所以可以直接用long long 存储 从1出发,每次向10*s和10*s+ ...

  3. Nginx笔记02-nginx常用参数配置说明

    nginx的主配置文件是nginx.conf,这里主要针对这个文件进行说明 1.主配置文件nginx.conf   2.nginx配置文件的结构 从上面的配置文件中我们可以总结出nginx配置文件的基 ...

  4. SharePoint Development - Custom Field using Visual Studio 2010 based SharePoint 2010

    博客地址 http://blog.csdn.net/foxdave 自定义列表的时候有时候需要自定义一些字段来更好地实现列表的功能,本文讲述自定义字段的一般步骤 打开Visual Studio,我们还 ...

  5. 配置java环境变量，实现一条命令自由切java7 或java8

    在多个java编译环境中,有时需要java 7,有时又需要java 8,怎么配置java 环境,可以快速自动切换呢?下面用mac演示在 /etc/bashrc 中配置的环境变量 # 设置 JDK ex ...

  6. “之”字形输出二叉树 python

    “之”字形输出二叉树即第1层从左到右输出,第2层从右到左输出,第3层从左到右输出......第2*n层从右到左输出,第2*n+1层从左到右输出,如下图所示二叉树,“之”字形输出的结果为:1-3-2-4 ...

  7. nodejs通过buffer传递数据到前端,前端通过arraybuffer接收数据

    以后端传送threejs中的点阵数组为例: 后端: let buffer = Buffer.alloc((points.length + 4) * 4) //points.length + 4:预留前 ...

  8. 2018-2019-1 20165212 《信息安全系统设计基础》第八周学习总结（pwd）

    2018-2019-1 20165212 <信息安全系统设计基础>第八周学习总结 一.知识点总结 1.三种并发方式 构造并发程序的方法有三种: 进程 线程 I/O多路复用 进程:用内核来调 ...

  9. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 20165222

    Exp0 Kali安装 安装时没进行截图,只有最终结果.包含共享文件夹,拼音输入法,网络也能正常使用. . 遇到的问题 安装时,安装程序提示找不到网卡. 我猜测应该是我的主机正在使用,程序无法检测到, ...

  10. Jenkins搭建.NET自动编译发布远程环境

    继上一篇文章Jenkins搭建.NET自动编译发布本地环境 发布到本地成功后,接下来配置发布到远程环境. Build配置——发布到远程 根据前面VS中发布项目,生成的CustomProfile2 来配 ...