• 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. Restframework 频率throttle组件实例-3

    频率逻辑: from rest_framework.throttling import BaseThrottle import time VISIT_RECORD={} class VisitThro ...

  2. s11 day105

  3. Android-------------fragment的学习

    一.fragment的静态使用 1.使用步骤:    a.继承fragment   重写onCreatevVew()的回调方法 b.设置Fragment的布局 c.在Activity中声明Fragme ...

  4. python基础知识input到while循环

    j周笔记 输入与输出 1.输入 input ('请输入内容')= 字符串 2.输出 print(输出到控制台) 变量vairable               变量就是相当于我们人的名字 1.名字 ...

  5. nginx-限制后端服务器连接数

    http加 limit_conn_zone $binary_remote_addr zone=perip:10m;limit_conn_zone $server_name zone=perserver ...

  6. CSDN无耻，亿赛通无耻

    吐槽下,自己写一篇关于亿赛通加密文件的简单破解方式,竟然收到请求删除博客的私信,然后那篇博客就没有了. 太过于无耻了.

  7. python+scrapy 爬取西刺代理ip(一)

    转自:https://www.cnblogs.com/lyc642983907/p/10739577.html 第一步:环境搭建 1.python2 或 python3 2.用pip安装下载scrap ...

  8. Python小白学习之路（七）—【字典】【字典的功能】【布尔值】

    字典(dict) 基本结构: d = {key1 : value1, key2 : value2 } dict = {'} key : value称为字典的键值对. 每个键 key和值value 之间 ...

  9. 第5章—构建Spring Web应用程序—关于spring中的validate注解后台校验的解析

    关于spring中的validate注解后台校验的解析 在后台开发过程中,对参数的校验成为开发环境不可缺少的一个环节.比如参数不能为null,email那么必须符合email的格式,如果手动进行if判 ...

  10. Zookeeper+ActiveMQ集群搭建

    搭建三台虚拟机安装centos7.要提前安装好jdk环境 1.环境准备,搭建三台虚拟机ip分别是 192.168.192.130 192.168.192.131 192.168.192.134 Zoo ...