JavaScript-获取元素-DOM
1.获取元素-DOM
1.目标
掌握元素的获取
完成如下案例
2.实现思路
- 获取nav元素
- 设置子元素
3.代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷！title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<div class="home">
<header>
<div class="w">
<ul>
<li><a href="#">请先登录a>|li>
<li><a href="#">免费注册a>|li>
<li><a href="#">我的订单a>|li>
<li><a href="#">会员中心a>|li>
<li><a href="#">帮助中心a>|li>
<li><a href="#">在线客服a>|li>
<li><a href="#">手机版a>li>
ul>
div>
header>
<div class="xtx-main-nav">
<div class="w">
<h1>
<img src="./images/logo.png" alt="">
h1>
<nav class="fl">
nav>
<div class="search">
<input type="text" placeholder="搜一搜">
div>
<div class="cart fl">
<span>200span>
div>
div>
div>
<div class="xtx-entry">
<div class="w">
<div class="banners">
<ul class="clearfix">
<li><a href="#"><img src="./uploads/banner_1.png" alt="">a>li>
<li><a href="#"><img src="./uploads/banner_1.png" alt="">a>li>
<li><a href="#"><img src="./uploads/banner_1.png" alt="">a>li>
<li><a href="#"><img src="./uploads/banner_1.png" alt="">a>li>
<li><a href="#"><img src="./uploads/banner_1.png" alt="">a>li>
ul>
<span class="prev">span>
<span class="next">span>
<div class="circular">
<span>span><span class="active">span><span>span><span>span><span>span>
div>
div>
<div class="goods-nav">
<ul>
<li><a href="#">生鲜 水果 蔬菜a>li>
<li class="active"><a href="#">美食 面点 干果a>li>
<li><a href="#">餐厨 数码产品a>li>
<li><a href="#">电器 床品 四件套 被枕a>li>
<li><a href="#">居家 奶粉 玩具 辅食a>li>
<li><a href="#">洗护 洗发 洗护 美妆a>li>
<li><a href="#">孕婴 奶粉 玩具a>li>
<li><a href="#">服饰 女装 男装a>li>
<li><a href="#">杂货 户外 图书a>li>
<li><a href="#">品牌 品牌制造a>li>
ul>
div>
div>
div>
<div class="xtx-new-goods">
<div class="w">
<div class="new-goods-hd">
<h2 class="fl">
新鲜好物
<span>
新鲜出炉，品质靠谱
span>
h2>
<a href="#" class="fr">查看全部a>
div>
<div class="xtx-goods-bd clearfix">
<div class="w">
<ul>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
a>
<div class="info">
<h3>睿米无线吸尘器F8h3>
<p>
<span>￥span>
<span>899span>
p>
div>
li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
a>
<div class="info">
<h3>智能环绕3D空调h3>
<p>
<span>￥span>
<span>1299span>
p>
div>
li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
a>
<div class="info">
<h3>广东软软糯米煲仔饭h3>
<p>
<span>￥span>
<span>129span>
p>
div>
li>
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
a>
<div class="info">
<h3>罗西机械智能手表h3>
<p>
<span>￥span>
<span>399span>
p>
div>
li>
ul>
div>
div>
div>
div>
<div class="xtx-fresh-goods">
<div class="w">
<div class="fresh-goods-hd">
<h2 class="fl">生鲜h2>
<div class="nav fr">
<a href="#" class="active">水果a>
<a href="#">蔬菜a>
<a href="#">肉禽蛋a>
<a href="#">裤装a>
<a href="#">衬衫a>
<a href="#">T恤a>
<a href="#">内衣a>
<a href="#">查看全部a>
div>
div>
<div class="fresh-goods-bd">
<div class="banner fl">
<img src="./uploads/fresh_goods_cover.png" alt="">
div>
<div class="goods-list fl">
<ul>
<li>
<a href="#">
<img src="./uploads/fresh_goods_1.jpg" alt="">
a>
<div class="info">
<p>美威 智利原味三文鱼排 240g/袋 4片装p>
<h3>海鲜年货h3>
<p class="price">
<span>￥span>
<span>59span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_2.jpg" alt="">
a>
<div class="info">
<p>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
<h3>火锅食材h3>
<p class="price">
<span>￥span>
<span>79span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_3.jpg" alt="">
a>
<div class="info">
<p>三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<h3>海鲜水产h3>
<p class="price">
<span>￥span>
<span>49span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_4.jpg" alt="">
a>
<div class="info">
<p>渔公码头 大连鲜食入味 即食海参 辽参刺参p>
<h3>调味海h3>
<p class="price">
<span>￥span>
<span>899span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_5.jpg" alt="">
a>
<div class="info">
<p>越南白心火龙果4个装 标准果400-550gp>
<h3>新鲜水果h3>
<p class="price">
<span>￥span>
<span>20span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_6.jpg" alt="">
a>
<div class="info">
<p>广西沃柑 新鲜水果 柑橘1.5kgp>
<h3>新鲜水果h3>
<p class="price">
<span>￥span>
<span>10span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_7.jpg" alt="">
a>
<div class="info">
<p>进口 牛油果 6个装 单果重约130-180gp>
<h3>新鲜水果h3>
<p class="price">
<span>￥span>
<span>50span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
<li>
<a href="#">
<img src="./uploads/fresh_goods_8.jpg" alt="">
a>
<div class="info">
<p>泰国进口山竹5A级 500gp>
<h3>新鲜水果h3>
<p class="price">
<span>￥span>
<span>60span>
p>
div>
<div class="mask">
<p>找相似p>
<p>发现更多宝贝 >p>
div>
li>
ul>
div>
div>
div>
div>
<div class="xtx-topic">
<div class="w">
<div class="topic-hd">
<h3 class="fl">最新专题h3>
<a class="fr" href="#">查看更多a>
div>
<div class="topic-bd clearfix">
<ul>
<li>
<a href="#">
<div class="info">
<h3>吃这些美食才不辜负自己h3>
<p>餐厨起居洗护好物p>
<p>
<span>￥span>
<span>29.9起span>
p>
div>
a>
<div class="count">
<span>1220span>
<span>1800span>
<span>246span>
div>
li>
<li>
<a href="#">
<div class="info">
<h3>吃这些美食才不辜负自己h3>
<p>餐厨起居洗护好物p>
<p>
<span>￥span>
<span>29.9起span>
p>
div>
a>
<div class="count">
<span>1220span>
<span>1800span>
<span>246span>
div>
li>
<li>
<a href="#">
<div class="info">
<h3>吃这些美食才不辜负自己h3>