• id：元素在文档中唯一标识符。
  • title：有关元素的附加说明信息，一般通过工具提示条显示出来。
  • lang：元素内容的语言编码，很少使用
  • dir：语言方向，职位“Ltr”（从左至右）、Rtl（从右至左），很少使用。
  • className：与元素的calss特性对应，即为元素指定的CSS类样式。

访问元素

　　1.getElementById()方法

　　　　使用getElementById()方法可以准确的获取文档中指定元素

　　　　document.getElementById(ID)；

　　　　参数ID表示文档中对应元素的id值。如果文档中不存在指定元素，则返回null。该方法只适用于document对象。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>

<body>

    <p id="attr">世界之大，无奇不有</p>

<ul>

</ul>

<script>

   var box= document.getElementById("attr");   //获取元素

   var nodename=box.nodeName;      //获取节点名称

   var nodetype=box.nodeType;      //获取节点类型

   var nodeparent=box.parentNode.nodeName;   //获取该节点的父节点

   var nodechilde=box.childNodes[0].nodeName; //获取该节点的父节点

alert("节点名称"+nodename+"节点类型"+nodetype+"父节点"+nodeparent+"子节点"+nodechilde); </script> </body> </html>

2.getElementsByClassName()方法

　　此方法获取的是元素的calss属性，从函数的名字可以知道，通过getElementsByClassName获取到的是一个数组，包括多个DOM元素，所以要执行DOM元素的方法，必须加一个索引，比如document.getElementsByClassName("class名")[0]。

　　而由于id是唯一的，所以通过getElementById只有一个DOM元素，可以直接调用DOM方法。

　　document.ElementsByClassName(class);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta  name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>

<body>

    <p id="attr" class="ff">世界之大，无奇不有</p>

<ul>

</ul>

<script>

   var box= document.getElementsByClassName("ff")[0];   //获取元素第一个

   var node=box.nodeName;

   alert(node);

</script>

</body>

</html>

3.使用getElementByTagName()方法

　　使用此方法可以获取指定标签名称的所有元素

　　document.getElementByTagName(tagName);

　　参数tagName表示指定名称的标签，该方法返回值为一个几点的集合，使用length属性可以获取集合中包含元素的个数，利用下标可以访问其中某个元素的对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta  name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>

<body>

    <p id="attr" class="ff">世界之大，无奇不有</p>

<ul>

</ul>

<script>

  var box=document.getElementsByTagName("p")[0];    //获取标签为p的第一元素；

  alert(box.innerHTML);

</script>

</body>

</html>

　　

DOM-访问元素的更多相关文章

  1. DOM访问元素样式和操作元素样式

    在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...

  2. DOM学习总结（三）DOM访问/操作

    DOM访问理解:找到这个标签元素,然后才能对它进行操作 1.getElementById() 方法document.getElementById(""); //通过id名字来找到 ...

  3. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  4. DOM中元素节点、属性节点、文本节点的理解

    DOM中元素节点.属性节点.文本节点的理解 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是:nodeName(节点名称) nodeValue(节点值) nodeType(节点类型)  ...

  5. 剑指前端（前端入门笔记系列）——DOM（元素节点）

    DOM(元素节点) 本文介绍了元素节点的基本操作:增删改查   增 新增一个元素节点分为两步(二者缺一不可),第一步:创建元素节点,第二步:将创建的元素节点插入到指定元素节点中(也就是插入指定元素节点 ...

  6. 【JavaScript】frame跨域访问元素

    什么是跨frame访问元素呢?比如main.html中有如下代码: <frameset cols="50%,*"> <frame src="frame1 ...

  7. DOM操作元素

    DOM 操作元素 JavaScript的DOM操作可以改变网页内容.结构和样式.我们可以利用DOM操作元素来改变元素里面的内容.属性等. DOM操作元素: 一.操作元素:(一)innerText .( ...

  8. layer 父弹窗获取子弹窗内的dom节点元素和变量

    1 var body = layer.getChildFrame('body', index); //获取子弹窗的dom节点 2 3 var iframeWin = window[layero.fin ...

  9. DOM获取元素、修改元素

    ## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...

  10. [DOM]获取元素：根据ID、标签名、HTML5新增的方法、特殊元素获取

    目录 [DOM]获取元素:根据ID.标签名.HTML5新增的方法.特殊元素获取 1.根据 ID 获取[.getElementById( )] 2.根据标签名获取[.getElementsByTagNa ...

随机推荐

  1. docker 搭建Mysql集群

    docker基本指令: 更新软件包 yum -y update 安装Docker虚拟机(centos 7) yum install -y docker 运行.重启.关闭Docker虚拟机 servic ...

  2. Mutual Training for Wannafly Union #6 E - Summer Trip(并查集)

    题目链接:http://www.spoj.com/problems/IAPCR2F/en/ 题目大意: 给m个数字代表的大小,之后n组数据,两两关联,关联后的所有数字为一组,从小到大输出组数以及对应的 ...

  3. JS: 数组扁平化

    数组扁平化 什么是数组扁平化? 数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层. // 多层嵌套 [1, 2, [3, 4]] // 一层 [1, 2, 3, 4] 递归实现 思 ...

  4. Java执行Shell脚本“No such file or directory” (win->Linux)异常的可能原因

    转自:http://blog.csdn.net/zlpdaisy/article/details/6134314 用Runtime.getRuntime().exec()方法执行Linux的一个She ...

  5. 再学Java 之 Integer 包装类缓存

    前言:本博文将涉及的Java的自动装箱和自动拆箱,可以参考 这篇文章 和 官方教程 ,这里不再赘述. 首先,先看一个小程序: public class Main { public static voi ...

  6. 快速初步了解Neo4j与使用

    快速初步了解Neo4j与使用 Neo4j是一个高性能的,NOSQL图形数据库,它将结构化数据存储在网络上而不是表中.它是一个嵌入式的.基于磁盘的.具备完全的事务特性的Java持久化引擎,但是它将结构化 ...

  7. 记一次Socket编程踩的坑

    闲来无事研究了下Socket,想用它做个简单的聊天室模型,结果踩了个坑,整半天才出来,惭愧啊,先上完成的代码吧 服务端: public partial class Form1 : Form { pub ...

  8. vue2.0实现购物车功能

    购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用vue2.0实现一个简单的购物车功能,数据都本地自己写的假数据 功能列表: 1.全选和单选结算 2.减少和增加数量 3.商品的删除 界面搭建以及布 ...

  9. ASP.NET Core 中的缓存

    目录 缓存的基本概念 缓存原理 缓存设计 分布式缓存 Memcache 与 Redis 的比较 缓存穿透,缓存击穿,缓存雪崩解决方案 数据一致性 使用内置 MemoryCache 使用分布式缓存 Re ...

  10. Go RabbitMQ （一）

    RabbitMQ 简介 RabbitMQ是一个消息代理,用来负责接收和转发消息. 术语 生产者:生产者是负责发送消息的 队列:队列是RabbitMQ用来存储消息的,受主机内存和磁盘大小的限制,本质上是 ...