老师说说看获取menuItems的三种方式 为什么只有第一种可以？不是等价的吗？

老师说说看获取menuItems的三种方式 为什么只有第一种可以？不是等价的吗？

老师说说看获取menuItems的三种方式 为什么只有第一种可以？this.menu和element.menu不是等价于getEle("menu_s")吗？

<!DOCTYPE html>

<html>


<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">

<title></title>


<style type="text/css">

* {

padding: 0;

margin: 0;

font-family: Microsoft YaHei;

list-style: none;


}


body {

min-width: 1200px;

}


/* 头部样式 */

.head {

width: 100%;

height: 110px;

background-color: rgb(239, 239, 239);

border-bottom: 2px solid rgb(26, 135, 201);

}


/* 头部主体内容样式 */

.head .head_main {

width: 1200px;

margin: auto;

height: 100%;

height: 110px;

line-height: 110px;

}


/* 头部左边的小型文字样式 */

.head .head_main .x {

font-size: 12px;

color: rgb(165, 171, 165);

}


.head .head_main .x:hover {

color: orange;

}


/* 头部左边的图片和文字样式 */

.head .left img,

.head .left p {

float: left;

cursor: pointer;

}


.head .left p:hover {

color: orange;

}


.head .left img {

margin-right: 10px;

/*  margin-left: 90px; */

}


.head .left p {

font-size: 20px;

}


/* 头部右边总体的样式 */

.head .right {

float: right;

list-style: none;

height: 100%;

line-height: 110px;

}


/* 头部右边的每一项的样式 */

.head .right>li {

float: left;

height: 100%;

margin-right: 30px;

font-size: 14px;

cursor: pointer;

}


.head .right li .menu {

height: 100%;

}


.head .right li a {

margin-left: 5px;

color: orange;

text-decoration: none;

}


.head .right .menu_img {

display: inline-block;

width: 25px;

height: 15px;

}


.head .right .phone {

display: inline-block;

width: 15px;

height: 30px;

margin-top: 40px;

margin-right: 10px;

float: left;

}


.head .right p {

float: left;

}


.head .right li:hover {

color: orange;

}



/* 头部右边下拉菜单项的样式 */

.menu {

width: 110px;

position: relative;

}


.menu .menu_s {

position: absolute;

z-index: 3;

top: 66px;

right: -18px;

width: 150px;

margin-bottom: 5px;

background-color: white;

border: 1px solid #FFA500;

box-sizing: border-box;

display: none;

}


/* 下拉菜单 */

.head .menu .menu_s>li {

text-indent: 2px;

height: 30px;

line-height: 30px;

width: 150px;

color: rgb(176, 177, 178);

}


.head .menu .menu_s .first {

margin-top: -24px;

}


/* 中间主体部分 */

.main {

width: 1200px;

margin: auto;

}


.main .main_center .main_center_first {

color: rgb(144, 134, 147);

}


.main .main_center .main_center_title {

font-size: 20px;

padding: 10px;

}


.main .main_center .message {

border: 1px solid rgb(251, 116, 3);

height: 500px;

/* background-color: rgb(255, 250, 232); */

}


.main .main_center .message .message_head {

width: 100%;

background-color: rgb(251, 116, 3);

height: 32px;

line-height: 32px;

color: white;

text-indent: 10px;

border-radius: 5px;

box-sizing: border-box;

}


.main .main_center .message .message_main {

margin: auto;

width: 605px;

height: 100%;

position: relative;

}



.message .message_main .item {

width: 800px;

margin-top: 18px;

position: relative;

}


.message .message_main .item span {

display: inline-block;

}


.message .message_main .item .star {

color: rgb(251, 116, 3);

}


.message .message_main .item input,

.message .message_main .item select {

width: 225px;

position: absolute;

left: 108px;

}


.message .message_main .item .item_a {

color: rgb(251, 116, 3);

position: relative;

}


.message .message_main .item .rule {

width: 440px;

display: block;

position: absolute;

z-index: 3;

left: 92px;

background-color: white;

border: 1px solid rgb(26, 135, 201);

display: none;

}


.message .message_main .item .item_a:hover .rule {

display: block;

color: black;

}


.message .message_main .item .item_ {

position: absolute;

left: 360px;

}


/* 密码强度条 */

.message .message_main .item .item_ .red,

.message .message_main .item .item_ .orange,

.message .message_main .item .item_ .green,

.message .message_main .item .item_ .gray {

margin-right: 3px;

}


.message .message_main .item .item_ .red {

width: 40px;

height: 10px;

background-color: red;

}


.message .message_main .item .item_ .orange {


width: 40px;

height: 10px;

background-color: orange;

}


.message .message_main .item .item_ .green {

margin: 0px 1px;

width: 40px;

height: 10px;

background-color: green;

}


.message .message_main .item .item_ .gray {

width: 40px;

height: 10px;

background-color: rgb(239, 239, 239);

margin: 0px 1px;

}


.message .message_main .confirm {

position: absolute;

left: 108px;

margin-top: 21px;

}


.message .message_main .confirm a {

text-decoration: none;

}


.message .message_main .submit {

width: 200px;

height: 30px;

color: white;

background-color: rgb(251, 116, 3);

font-size: 20px;

font-weight: bold;

line-height: 30px;

text-align: center;

position: absolute;

left: 140px;

top: 410px;

border-radius: 5px;

cursor: pointer;

}


.message .message_main .submit:hover {

background-color: #FFA500;

}


.footer {

margin-top: 10px;

height: 80px;

width: 100%;

background-color: rgb(239, 239, 239);

text-align: center;

color: rgb(165, 171, 165);

font-size: 14px;

border-top: 2px solid rgb(26, 135, 201);


}


.footer p {

margin-top: 19px;

}


</style>

</head>


<body>

<div class="wrap">

<!-- 头部 -->

<div class="head">

<!-- 头部主体宽度 -->

<div class="head_main">

<!-- 头部主体左部分 -->

<div class="left">

<img src="img/logo.png" alt="">

<p>慕课高铁客户服务中心 | <span class="x"> 客户服务</span></p>

</div>

<!-- 头部主体右部分 -->

<ul class="right">

<li>意见反馈<a href="javascript:void(0)" ;>imooc@com</a></li>

<li>你好，请<a href="javascript:void(0)" ;>登录</a> | 注册</li>

<li class="menu">

<p id="myMenu">我的IMOOC <img src="img/menu.png" class="menu_img"></p>

<!-- 下拉菜单内容 -->

<ul class="menu_s" id="menu_s">

<li>未完成订单</li>

<li>已经完成的订单(改/退) </li>

<li>.................................</li>

<li>我的保险</li>

<li>.................................</li>

<li>查看个人信息</li>

<li>账户安全</li>

<li>.................................</li>

<li>常用联系人</li>

<li>.................................</li>

<li>重点旅客预约</li>

<li>遗失物品查找</li>

<li>.................................</li>

<li>服务查询</li>

<li>.................................</li>

<li>投诉</li>

<li>建议</li>

</ul>


</li>

<li>

<img src="img/phone.png" class="phone">手机版

</li>

</ul>


</div>

</div>

<!-- 主体内容 -->

<div class="main">

<div class="main_center">

<p class="main_center_title">您现在的位置是：<span class="main_center_first">客运>首页</span></p>

<div class="message">

<div class="message_head">

账户信息

</div>

<div class="message_main">

<div class="item">

<span class="star">*</span>

<label>用&nbsp;&nbsp;户&nbsp;名:</label>

<input type="text" id="userName" placeholder="用户名设置成功后不可修改" />

<span class="item_"></span>

</div>

<div class="item">

<span class="star">*</span>

<label>登录密码:</label>

<input type="password" id="userPassword" placeholder="6-20位字母、数字或符号" />

<span class="item_">


</span>

</div>

<div class="item">

<span class="star">*</span>

<label>确认密码:</label>

<input type="password" id="userPassword_" placeholder="请再次输入您的登录密码" />

<span class="item_"></span>

</div>

<div class="item">

<span class="star">*</span>

<label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label>

<input type="text" id="IdName" placeholder="请输入姓名" />

<span class="item_">

<a href="javascript:void(0)" ; class="item_a">姓名填写规则<span class="rule">

1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。

<br><br>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。

<br><br>3.姓名中有繁体字无法输入时，可用简体替代。

<br><br>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，

需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），

其中英文字符输入时不区别大小写</span></a>


</span>

</div>

<div class="item">

<span class="star">*</span>

<label>证件类型:</label>

<select name="zj">

<option value="二代身份证">二代身份证</option>

<option value="港澳通行证">港澳通行证</option>

<option value="台湾通行证">台湾通行证</option>

<option value="护照">护照</option>

</select>

</div>

<div class="item">

<span class="star">*</span>

<label>证件号码:</label>

<input type="text" id="IdNum" placeholder="请输入您的证件号码" />

<span class="item_"></span>

</div>

<div class="item">

<span class="star">*</span>

<label>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</label>

<input type="email" id="email" placeholder="请正确填写邮箱地址" />

<span class="item_"></span>

</div>

<div class="item">

<span class="star">*</span>

<label>手机号码:</label>

<input type="text" id="phone" placeholder="请输入您的手机号码" />

<span class="item_"></span>

</div>

<div class="item">

<span class="star">*</span>

<label>旅客类型:</label>

<select name="zj" width="225px">

<option value="成人">成人</option>

<option value="儿童">儿童</option>

<option value=">学生">学生</option>

<option value="残疾军人">残疾军人</option>

<option value="伤残人民警察">伤残人民警察</option>


</select>

</div>

<div class="confirm">

<input type="radio" id="read" /><span>我已阅读并同意遵守</span><a href="javascript:void(0)" ;class="confirm_">《中国铁路客户服务中心网站服务条款》</a>

</div>

<div class="submit" id="submit">下一步</div>

</div>

</div>

</div>

</div>

<div class="footer">

<p>关于我们 | 网站声明</p>

<p>Copyright◎2017 imooc .com All Rights Reserved|京ICP备 13046642号-2</p>

</div>

</div>


<script type="text/javascript">

(function () {

            function getEle(id) {

                return document.getElementById(id);

            }

            var element = { //menuItems: getEle("menu_s").getElementsByTagName("li"),

                myMenu: getEle("myMenu"), //获取选项：我的IMOOC

                menu: getEle("menu_s"), //获取下拉菜单


              menuItems: getEle("menu_s").getElementsByTagName("li"), //获取下拉菜单的每一项

               menuItems: this.menu.getElementsByTagName("li"),

               menuItems: element.menu.getElementsByTagName("li"), 


                userName: getEle("userName"), //用户名输入框

                passWord: getEle("userPassword"), //输入密码文本框

                passWord_: getEle("userPassword_"), //输入确认密码文本框

                IdName: getEle("IdName"), //姓名

                IdNum: getEle("IdNum"), //身份证号码

                email: getEle("email"), //邮箱号码

                Phone: getEle("phone"), //手机号码

                read: getEle("read"), //是否阅读选项

                submit: getEle("submit"), //提交按钮

            };


         

        })()

</script>

</body>


</html>
大白前端 2020-08-03
源自：项目：JS表单验证案例   3-10 作业题
27
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕码 回答被采纳获得+3积分 2020-08-03 14:55:58

同学你好，后面两种写法是错误的。

第一种，在该对象中并没有调用this，那么this指向的是全局，即window。window下没有menu这个属性，this.menu为undefined，所以this.menu.getElementsByTagName("li")是获取不到值的。可以修改为这样，并打印element对象看下：

http://img1.sycdn.imooc.com//climg/5f27b489096a6ed802090047.jpg

http://img1.sycdn.imooc.com//climg/5f27b493094e9a4809660233.jpg

第二种，element是整个对象，在对象里不可以直接使用。可以修改为这样，并打印element对象看下：因此menuItems: element.menu.getElementsByTagName("li")也是不成立的

http://img1.sycdn.imooc.com//climg/5f27b42a09ccb01605020063.jpg

http://img1.sycdn.imooc.com//climg/5f27b4600969c1b806630263.jpg

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

python的第三方包有2种：一种可以通过inport 或是？？？
6 0 7
视频6:00说querySelectorAll只能用document调用的说法是错误的吧？
22 0 3
老师说说看获取menuItems的三种方式 为什么只有第一种可以？不是等价的吗？
9 0 1
老师，变量input的位置（三种写法）有什么不同，其中第一个写法会导致浏览器崩溃，是什么原因呢？日常开发中推荐哪一种写法呢
42 0 7
老师您好，三种定义变量的方式在性能和内存上有没有什么区别呢
98 1 10

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师