文档章节

DOM中常见的几种获取节点的方法 --转

y
 ys_y
发布于 2016/07/11 15:06
字数 532
阅读 7
收藏 0

第一种: 通过id属性获取

这是最为常用到的,也是从DOM文档树中获取单个指定元素的最为快捷的方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示几种获取节点(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <p id="op">这里是p元素</p>
    
    <script>
        //通过p标记的特性id值,获取元素p
        var op=document.getElementById("op");
    </script>
</body>
</html>

第二种:通过name属性获取

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示几种获取节点(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <form id="myform" name="myform" method="post" action="#">
        你喜欢什么颜色:
        <input type="radio" name="color" value="red" />红
        <input type="radio" name="color" value="green" />蓝
        <input type="radio" name="color" value="blue" />绿
    </form>
<script>
    //通过name标记的特性id值,获取元素
    var oradio=document.getElementsByName("color");
    for(var i=0;i<oradio.length;i++){
        alert(oradio[i].value);//打印值
    }
</script>
</body>
</html>

通常在操作单选框和复选框时,这样获取比较的方便
第三种:通过标记名来获取元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示几种获取节点(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <p>我是第一个p标记</p>
    <p>我是第二个p标记</p>
<script>
    //通过标记名,获取元素为p的集合
    var listP=document.getElementsByTagName("p");
    alert(listP[0].innerHTML+"||"+listP[1].innerHTML);
</script>
</body>
</html>

第四种:通过元素的class属性获取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>演示几种获取节点(元素)的方法</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <p class="p1">我是第一个p标记</p>
    <p>我是第二个p标记</p>
<script>
    //通过class值,获取元素为p的集合
    var listP=document.getElementsByClassName("p1");
    for(var i=0;i<listP.length;i++){
        alert(listP[i].innerHTML);
    }
</script>
</body>
</html>

以上是js中几种常用的访问元素的方法。

本文转载自:

y
粉丝 0
博文 4
码字总数 136
作品 0
厦门
私信 提问
DOM中常见的几种获取节点的方法

DOM中常见的几种获取节点的方法 第一种: 通过id属性获取 这是最为常用到的,也是从DOM文档树中获取单个指定元素的最为快捷的方法。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit...

喝豆浆不放糖
2014/04/10
0
0
关于JavaScript/jQuery

问题一: javaScript中window.onload和jquery中document.ready()的区别: 两者的区别主要有以下两点: 在页面中onload()只能使用一次,而jquery中的document.read()可以多次使用. document.read...

Miss_差不多
2017/10/20
0
0
javascript知识点总结(二)之 DOM和BOM对象模型

1,字符串创建方式:1,var str = ‘hello word’;字面量方式创建 2,var str = new String(‘hello word’);构造函数方式创建 字符串常见方法: charAt :根据下标获取字符。str.charAt(...

青衫无名
2018/06/01
0
0
将HTML字符转换为DOM节点并动态添加到文档中

将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个...

玄魂
2018/08/18
0
0
jQuery对象与DOM对象的相互转换

下面介绍jquery对象和DOM对象的相互转换: 在使用jquery框架进行处理时,当我们使用$(expression)方法时,如:获取id="jquery_a"的div元素对象时,实际上获取到的值不是DOM对象,而是jquery对...

Sandy_wu
2013/03/27
0
1

没有更多内容

加载失败,请刷新页面

加载更多

利用mybatis generator生成实体类、Mapper接口以及对应的XML文件

项目中通常会遇到数据的持久化,如果是采用mybatis的orm,就会涉及到生成xml的问题,刚好mybatis官网提供了这么个插件MyBatis Generator,效果简直是棒呆。 1. 首先需要在build.gradle文件中...

啊哈关关
今天
2
0
SpringSocial相关的知识点

使用SprigSocial开发第三方登录 核心类 ServiceProvider(AbstractOauth2ServiceProvider):主要负责实现server提供商(例如QQ,微信等共有的东西),默认实现类是AbstractOauth2ServiceProvider...

chendom
今天
3
0
Java并发之AQS详解

一、概述   谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)!   类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资源...

群星纪元
昨天
4
0
Fabric-sdk-java最新教程

Fabric Java SDK是Fabric区块链官方提供的用于Java应用开发的SDK,全称为Fabric-sdk-java,网上可用资料不多,本文列出了精心整理的针对Fabric Java SDK的最新精选教程。 如果希望快速掌握F...

汇智网教程
昨天
3
0
react 子组件监听props 变化

componentWillReceiveProps //已经被废弃 getDerivedStateFromProps// 推荐使用//如果条件不存在必须要返回null static getDerivedStateFromProps(props, current_stat...

一箭落旄头
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部