• 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. Python: pyinstaller打包exe（含file version信息）

    最近项目上一直都是用Spyder直接运行.py文件的方式来执行每日的自动化程序,每天都要手动去点击Run来执行一次,所以考虑把.py文件直接打包成exe,然后用windows的task schedul ...

  2. 反射获取属性DisplayName特性名字以及属性值

    /// <summary> /// 反射获取所有DisplayName标记值 /// </summary> /// <typeparam name="T&quo ...

  3. Ocelot中文文档入门

    入门 Ocelot仅适用于.NET Core,目前是根据netstandard2.0构建的,如果Ocelot适合您,这个文档可能会有用. .NET Core 2.1 安装NuGet包 使用nuget安 ...

  4. CSS2.1SPEC：视觉格式化模型之width属性详解(上)

    在介绍了包含块之后,CSS2.1标准中介绍了width属性和height属性,这两个属性在我们的页面布局中也发挥着重要的作用.在盒模型中,width和height包围了一个框的内容区域(content ...

  5. Java Web相关技术（汇聚页）

    Java Web相关技术(汇聚页) 初学Java Web(2)——搭建Java Web开发环境

  6. jzoj5710

    對於每個詢問,我們先考慮插入1~r中每個數的答案,這樣子就不用考慮後面數對現在的影響 那麼我們可以在權值線段樹的每一個位置存儲每一個值最後一次結束的位置 問題變成了,如何判斷區間連續? 我們可以對線段 ...

  7. sublime 把 tab 转成 4 个空格

    Preferences -> Settings-User {    "tab_size":4,    "translate_tabs_to_spaces" ...

  8. grafana 运行

    1,下载好项目,然后进入到目录 键入: ./bin/grafana-server web 运行 https://www.waitig.com/grafana-config-and-run.html 2 ...

  9. Advanced Debugging and the Address Sanitizer

    A debug trick 在异常端点处运行 po $arg1,找出异常信息.  Address Sanitizer 概述 是一个运行时检测工具 发现内存问题 可以用于模拟器和设备 可以发现的问题 ...

  10. linux 从0开始

    网络配置: http://blog.51yip.com/linux/1120.html 网络配置为自动获取 vi命令参考: http://c.biancheng.net/cpp/html/2735.h ...