鹰潭网站建设yt1983,fifa17做任务网站,贵阳网站设计详细解读,数据分析网官网目录
通过id获取文档元素
任务描述
相关知识
什么是DOM
文档元素
节点树
通过id获取文档元素
编程要求
通过类名获取文档元素
任务描述
相关知识
通过类名获取文档元素
编程要求
通过标签名获取文档元素
任务描述
相关知识
通过标签的名字获取文档元素
获取标…目录
通过id获取文档元素
任务描述
相关知识
什么是DOM
文档元素
节点树
通过id获取文档元素
编程要求
通过类名获取文档元素
任务描述
相关知识
通过类名获取文档元素
编程要求
通过标签名获取文档元素
任务描述
相关知识
通过标签的名字获取文档元素
获取标签内部的子元素
编程要求 通过id获取文档元素
任务描述 本关任务通过 id 获取指定的文档元素。
相关知识 什么是DOM Document Object Module 简称 DOM 中文名文档对象模型。在网页上组成页面又叫文档的一个个对象被组织在树形结构中用这种结构表示它们之间的层次关系表示文档中对象的标准模型就称为 DOM 。 DOM 的作用是给 HTML 文档提供一个标准的树状模型这样开发人员就能够通过 DOM 提供的接口去操作 HTML 里面的元素。
文档元素 先看一段网页代码
htmlheadtitle这里是标题/title/headbodyp这是我学习JavaScript的网址/pa hrefhttps://www.educoder.net/pathsJavaScript学习手册/a/body
/html
执行后效果如图 1 所示。 图 1 文档元素指的就是html、head等等这样一个个的标签和里面的内容。 比如文档元素title就是这样
title这里是标题/title
在 JavaScript 中元素title对应一个对象这个对象有一个属性的值是“这里是标题”。 所以用JS操作这些文档元素操作的就是它们对应的JS对象。
节点树 从代码的缩进可以知道文档元素之间有层次关系如图 2 所示。 图 2 图 2 和数据结构中树的概念类似被称为节点树。html是根节点网页的所有文档元素都在里面head和body是两个子节点分别存储网页标题有关内容和网页的主体部分。 JavaScript 要操作这些元素第一步自然是获得这些元素对应的 JavaScript 对象那么怎么获取呢
通过id获取文档元素 文档元素一般都有一个 id 属性它的值在本文档中唯一如下
p idmyId这是我学习JavaScript的网址/p
用这个 id 获取p元素的方法如下
var pElement document.getElementById(myId);
其中 document 表示整个文档getElementById()是 document 对象的一个方法参数是 id 属性的值 myId 。 获取的 pElement 就代表了p标签以及里面的内容接下来可以通过 pElement 操作这个元素。比如可以用弹框展示一下p标签里面的内容
window.alert(pElement.innerText);
效果如下 编程要求 本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码具体要求如下
获取本文档中 id 为 a1 的文档元素要求用 id 获取文档元素
将获取的元素赋值给变量 myElement
!DOCTYPE html
html langen
headmeta charsetUTF-8titleget element by id/title
/head
bodya ida1 srchttps://www.google.comGoogle/ap idp1this is a text/pscript!-- 请在此处编写代码 --!---------Begin---------var myElementdocument.getElementById(a1);!---------End---------myElement.hrefhttps://www.educoder.net;/script
/body
/html 通过类名获取文档元素
任务描述 本关任务通过类名获取指定的文档元素。
相关知识 除了 id 以外文档元素另外一个常见的属性是类名。
通过类名获取文档元素 文档元素的类名不唯一存在多个文档元素的类名相同的情况如下
p classmyName段落/p
a classmyName hrefhttps://www.educoder.net这是一个链接/a
document 的getElementsByClassName()方法用来获取指定类名的文档元素数组 NodeList 一般叫节点列表如下
var myNodeList document.getElementsByClassName(myName);
这样myNodeList[0]就是p元素而myNodeList[1]就是a元素通过这个方法的名字我们也可以知道获取的标签不唯一。 我们以弹框的形式查看一下p里面的内容
window.alert(myNodeList[0].innerText);
效果如图一所示 图一
编程要求 本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码具体要求如下
通过getElementsByClassName()方法获取文档中唯一的p元素
将获取到的结果赋值给变量 myElement 。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleget element by name/title
/head
bodyimg src classmyName/form classmyName idmyForm/formdiv classmyNameThis is quote/divp classmyNameThis is what you should get/pscript!-- 请在此处编写代码 --!---------Begin---------var myElementdocument.getElementsByClassName(myName)[3];!---------End---------myElement.innerTextI changed the text;/script
/body
/html 通过标签名获取文档元素
任务描述 本关任务通过标签名获取指定的文档元素。
相关知识 通过前面的多个例子我们可以看到文档无非是由几个特定的标签组成比如p、a、img等由此可以想到我们能不能通过标签的名字获取特定的文档元素呢
通过标签的名字获取文档元素 标签名指的是里面的字符串document 对象的getElementsByTagName()获取整个文档中指定名字的所有标签显然结果是一个文档元素数组节点列表方法的名字也暗示了这一点。
div iddiv1p idp1文本1/pp idp2文本2/pa namea1链接/a
/div
div iddiv2p idp3 namea1文本3/p
/div
获取所有的div元素如下
var allDiv document.getElementsByTagName(div);
为了显示效果我们以页面弹框的形式展示第一个div里面的内容
window.alert(allDiv[0]);
效果如下 这个弹框表明我们试图弹出的内容是一个div元素。
获取标签内部的子元素 我们获取到的文档元素也有getElementsByTagName()方法作用是获取该元素内部指定名字的所有子元素。比如要获取第一个div里面所有的a元素代码如下
//变量allDiv上面有这里不再重复
var allLink allDiv[0].getElementsByTagName(a); 这样就获取了第一个div里面的所有超链接元素。
编程要求 本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码具体要求如下
获取第二个 div 元素下的第二个 a 元素要求通过使用标签名获取
将获取到的结果赋值给变量 myElement 。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleget element by id/title/head
bodydiv classdivaa hrefhttps://www.educoder.netEduCoder/aa hrefhttps://www.facebook.comFaceBook/a/divdiv classdivba hrefhttps://www.twitter.comTwitter/aform namemyForm/forma hrefhttps://www.nudt.edu.cnNUDT/a/divp idppthis is a text/p
script!-- 请在此处编写代码 --!---------Begin---------var tempdocument.getElementsByTagName(div)[1];var myElementtemp.getElementsByTagName(a)[1];!---------End---------myElement.innerTextnudt;
/script
/body
/html
