javascript中五种常见的DOM方法
getElementById将返回一个与那个有着给定id属性值的元素节点对应的对象。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
alert(typeof document.getElementById("purchase"));
</script>
</body>
</html>
getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一组元素。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
for(var i=0;i<document.getElementsByTagName("li").length;i++){
alert(typeof document.getElementsByTagName("li")[i]);
}
</script>
</body>
</html>
getElementsByClassName( HTML5) ,只接受一个参数，也就是类名，返回一个具有相同类名的元素的数组
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
alert(document.getElementsByClassName("sale important").length);
</script>
</body>
</html>
getAttribute是一个函数，通过一个参数的名字的追加，可以获得此参数的值 而与之对应的setAttribute可以通过两个参数来设立需要被赋值的参数的名字和值
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>What to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchase">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script>
var paras=document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
if(title_text){
paras[i].setAttribute("title","brand new title text");
alert(paras[i].getAttribute("title"));
}
}
</script>
</body>
</html>
转载于:https://www.cnblogs.com/daochong/p/4827543.html
javascript中五种常见的DOM方法相关推荐
- java简述常见的布局极其特点_请简要说明 Android 中五种常见布局的特点。_学小易找答案...
[简答题]请简要说明有序广播和无序广播的区别 [简答题]请简要说明 Android 程序结构中 AndroidManifest.xml 的功能? [简答题]简述李村站人工办理进路的作业过程. [简答题 ...
- Unity（游戏）中五种数据存储的方法
Unity(游戏)中五种数据存储的方法 一.PlayerPrefs unity3d提供了一个用于本地持久化保存与读取的类-------PlayerPrefs.工作原理很简单,以键值对的形式将数据保存在 ...
- java中的排序方法_Java中8种常见的排序方法
本博主要介绍Java中几种常见的排序算法: /* 排序方法的演示 1)插入排序(直接插入排序.希尔排序) 2)交换排序(冒泡排序.快速排序) 3)选择排序(直接选择排序.堆排序) 4)归并排序 5)分 ...
- python五种常见的排序方法是_python中序列的排序，sorted方法、reversed方法的使用...
简介 INTRODUCTION 包括字典排序.列表排序.升序.降序.逆序 一.基础概念 我们知道python中的内建序列包括字典.列表.元组.字符串等,序列是python中最基本的数据结构. 列表.元 ...
- JavaScript 中 15 种常见的数组操作
本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习 ...
- JAVA数组中五种常见排序方法
前言: 几种常用的JAVA数组排序方法的整合. 法一:Arrays.sort() Arrays.sort()排序方法在java中是最简单且最常用的排序方法 int []arr1= {45,34,59, ...
- java数组排序法方法_JAVA数组中五种常见排序方法
前言: 几种常用的JAVA数组排序方法的整合. 法一:Arrays.sort() Arrays.sort()排序方法在java中是最简单且最常用的排序方法 int []arr1= {45,34,59, ...
- JavaScript中6种常见的继承方式
为什么需要继承? 在实际编码的过程中,如果有很多类似的方法都存放于构造函数中,这样会导致内存的浪费(内存泄漏),在这种情况下我们就需要用到继承. 继承是什么? 所谓继承就是通过某种方式让一个对象可以访 ...
- python五种常见的排序方法是_常见的经典的排序方法的实现（Python）
常见的经典算法的实现 首先来一张图,这张图总结了常见的几种排序算法的时间复杂度和空间复杂度的对比.现对常见的几种算法进行实现,以备后需.图片来源:专知 1. 快速排序 思路 先寻找一个基准数,然后接下 ...
最新文章
- 两个下拉框相关联ajax,触发第二个下拉框以显示基于从第一个下拉框中选择的值的值ajax...
- poj2226（最小顶点覆盖）
- AttributeError:module 'numbers' has no attribute 'Integral'.
- Appium Desktop介绍-xcodebuild failed with code 65 问题解决
- C语言switch分支结构
- ubuntu 配置url地址重定向协议
- 周期性取count请求是如何在前台setup的 - Tile count
- 【cocos2d-js官方文档】二十五、Cocos2d-JS v3.0中的单例对象
- python indexerror怎么办_Python IndexError：使用列表作为可迭代对象时...
- centos7编译 openjdk8
- 你真的理解零拷贝了吗？
- 解决WIN10本地账号绑定微软账号后无法解绑的方法
- poi操作PPT读取模板流，生成新PPT文件
- html文档成品,HTML成品代码
- Lab4 Architecture Lab
- 为什么误差采取平方和形式
- linux下USB3.0端口无法识别3.0设备
- 测绘-编写数字高程模型（DEM）内插程序
- fedora8下删除antivir
- js 延期执行_如何用javascript设置延时执行