• 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. 安装 rabbitmq ，通过生成器获取redis列表数据 与 Celery 分布式异步队列

    一.安装rabbitmq  @全体成员 超简易安装rabbitmq文档 1.安装配置epel源rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/ ...

  2. ASP.NET MVC Forms验证机制

    ASP.NET MVC 3 使用Forms身份验证 身份验证流程 一.用户登录 1.验证表单:ModelState.IsValid 2.验证用户名和密码:通过查询数据库验证 3.如果用户名和密码正确, ...

  3. JavaScript 闭包解决计数器问题

    JavaScript 闭包解决计数器问题 var add = (function () { var counter = 0; return function () {return counter += ...

  4. ubuntu编译安装ruby1.9.3，从p551降级到p484

    在升级redmine的时候遇到ruby版本适配的问题.找了些资料. ruby安装包除了官方网站,可以参考 http://ftp.ruby-lang.org/pub/ruby/1.9/ 需要从1.9.3 ...

  5. jdbc调试sql语句方法

    在main命令行输入三个参数到oracle 的 dept2表(自己建的 和dept一样(deptno,dname,loc)),插入到数据库中去.通过本例子,学习在java里调试sql的方法. 写完sq ...

  6. 【树】Convert Sorted Array to Binary Search Tree

    题目: Given an array where elements are sorted in ascending order, convert it to a height balanced BST ...

  7. 如何删除Eclipse里某个工作空间？

    很多时候,一个Eclipse中或多或少的都会有那么几个工作空间(workspace),但是久而久之你会发现有些工作空间你觉得不再需要了或者觉得碍眼,怎么办? 其实很简单,方法有两种. 1.打开你的Ec ...

  8. HUE配置文件hue.ini 的yarn_clusters模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  9. Annotate类

    在Annotate类中有个Annotator接口,定义如下: /** A client that has annotations to add registers an annotator, * th ...

  10. safari input默认样式

    在i标签下嵌套一个input标签  设置了 -webkit-apprarence:none: 设置了宽高,和padding:3px 结果placeholder显示不全 经排查 这时候的input默认有 ...