• 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. 缓存 - 内存数据库Redis

    客户端 Redis Desktop Manager 官网 新版的收费,或者要分享什么的.0.8.8的旧版才免费?:https://github.com/uglide/RedisDesktopManag ...

  2. SQL Server基础优化

    1.先过滤简单且能筛选大部分数据出去的条件: 2.只查询有用的数据 不返回自己不需要的列,尽量不要使用select *: 不要返回自己不需要的行,尽量使用where条件来过滤自己需要的内容: 考虑使用 ...

  3. Android 标题栏（1）

    本文来自网易云社区 作者:孙有军 标题栏在每个应用中都有,有各种各样的标题栏,今天我们就主要来说说标题栏怎么做,主要内容涉及到自定义标题,ActionBar,Toolbar等知识. 自定义标题 几年前 ...

  4. 第六章 ReentrantLock源码解析2--释放锁unlock()

    最常用的方式: int a = 12; //注意:通常情况下,这个会设置成一个类变量,比如说Segement中的段锁与copyOnWriteArrayList中的全局锁 final Reentrant ...

  5. 网易郑栋：数据采集与分析的那些事——从数据埋点到AB测试

    本文由  网易云发布. 4月8日晚,DTalk邀请到了网易互联网分析产品.可视化 BI 产品的负责人—郑栋老师,进行了一次关于<网易郑栋:数据采集与分析的那些事第一弹: 数据篇>的主题分享 ...

  6. Geometry-587. Erect the Fence

    There are some trees, where each tree is represented by (x,y) coordinate in a two-dimensional garden ...

  7. 字符串搜索 find()

    参考 <C++ Primer Plus>中文版 P870 #include <map> #include <fstream> #include <iostre ...

  8. webpack快速入门——处理HTML中的图片

    在webpack中是不喜欢你使用标签<img>来引入图片的,但是我们作前端的人特别热衷于这种写法, 国人也为此开发了一个:html-withimg-loader.他可以很好的处理我们在ht ...

  9. [Swift实际操作]七、常见概念-(10)使用UserDefaults和归档方式存取用户数据实际操作

    在项目开发之中,你会经常需要将一些数据存储在本地,以便记录用户生产的数据或操作习惯.在项目文件夹上带点击鼠标右键.弹出右键菜单.本文将为你演示,存储用户数据的两种常用方式. 选择菜单中的创建新文件选项 ...

  10. WIKI常用的表格设计模板

    域名服务器管理表格     数据库管理表格     软件路径说明表格   开发测试环境虚拟机表格