DOM学习笔记四

最新推荐文章于 2022-08-13 16:09:21 发布
最新推荐文章于 2022-08-13 16:09:21 发布
阅读量1.3k 收藏
点赞数
分类专栏： JavaScript Learn_Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjw0130/article/details/41827309
版权
DOM展开闭合列表：
overflow 属性规定当内容溢出元素框时发生的事情。
auto,hidden,inherit,scroll,visible


1.标签封装数据
2.定义样式，css
3.明确事件源和事件，以及要处理的节点，dom

4.明确具体操作方式(事件的处理内容)，js

<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        dl dd{   /*<dd>标签本来带着缩进功能，取消 */
            margin: 0px;
        }
        dl{
            height: 16px;
            overflow: hidden;
        }
    
    </style>
</head>
<body>
        <script type="text/javascript" >
            //列表展开闭合
            var flag = true;
            function list(){
                //1.将dl的overflow的属性改为visible
                var odlNode = document.getElementsByTagName("dl")[0];//获取dl节点
                //odlNode.style.overflow = "visible";这样点一下，展开，但是再也收不回去
                if(flag){
                    odlNode.style.overflow = "visible";
                    flag = false;
                }else{
                    odlNode.style.overflow = "hidden";
                    flag = true;
                }
            }
        </script>
        <dl>
            <dt οnclick="list()">菜单如下</dt>
            <dd>A菜单</dd>
            <dd>B菜单</dd>
            <dd>C菜单</dd>
            <dd>D菜单</dd>
        </dl>
</body>
</html>

但是上面那样写太烂了，应该尽可能的降低耦合性 

<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        dl dd{   /*<dd>标签本来带着缩进功能，取消 */
            margin: 0px;
        }
        dl{
            height: 16px;/*设置高度就是一个字的高度*/
        }
        /*预定义类选择器，便于给标签进行样式的动态加载*/
        .open{
            overflow: visible;
        }
        .close{
            overflow: hidden;
        }
    </style>
</head>
<body>
        <script type="text/javascript" >
            //重定义list，降低js和css的耦合性
          /* function list(){
                var odlNode = document.getElementsByTagName("dl")[0];//获取dl节点
                //odlNode.className ="open";
                if(odlNode.className=="close"){
                    odlNode.className="open";
                }else{
                    odlNode.className="close";
                }
            }//这中方式一旦列多了就不好用了*/
            function list(node){
                //alert(node.nodeName);
                var odlNode = node.parentNode;//当前操作的节点对象
                if(odlNode.className=="close"){
                    odlNode.className="open";
                }else{
                    odlNode.className="close";
                }
            }
        </script>
        <dl class="close">
            <dt οnclick="list(this)">一菜单如下</dt>
            <dd><a href="http://www.baidu.com">A菜单1</a></dd>
            <dd>B菜单1</dd>
            <dd>C菜单1</dd>
            <dd>D菜单1</dd>
        </dl>
 
        <dl class="close">
            <dt οnclick="list(this)">二菜单如下</dt>
            <dd>A菜单2</dd>
            <dd>B菜单2</dd>
            <dd>C菜单2</dd>
            <dd>D菜单2</dd>
        </dl>
        <dl class="close">
            <dt οnclick="list(this)">三菜单如下</dt>
            <dd>A菜单3</dd>
            <dd>B菜单3</dd>
            <dd>C菜单3</dd>
            <dd>D菜单3</dd>
        </dl>
</body>
</html>

//visible展开列表，并没有将余下页面中的内容挤下去，而是重叠在一起

在多个列表下，一次只能展开一个，余下关闭
1.获取所有dl节点，只对当前节点进行展开操作，余下关闭 


<html>
<head lang="en">
    <meta charset="UTF-8">
    <style type="text/css">
        dl dd{   /*<dd>标签本来带着缩进功能，取消 */
            margin: 0px;
        }
        dl{
            height: 16px;/*设置高度就是一个字的高度*/
        }
        /*预定义类选择器，便于给标签进行样式的动态加载*/
        .open{  overflow: visible;  }
        .close{  overflow: hidden;  }
    </style>
</head>
<body>
<script type="text/javascript" >

    function list(node){
      var ocurrentDlNode = node.parentNode;
      var odlNodes = document.getElementsByTagName("dl");

        for(var i = 0;i<odlNodes.length;i++){
            odlNodes[i]==ocurrentDlNode?
                    (ocurrentDlNode.className=="close"?ocurrentDlNode.className="open":
                            ocurrentDlNode.className="close"):(odlNodes[i].className="close");

           /* if(odlNodes[i]==ocurrentDlNode){
                ocurrentDlNode.className=="close"?ocurrentDlNode.className="open":
                                ocurrentDlNode.className="close";
            }else{
                odlNodes[i].className="close";
            }*/
        }
    }
    </script>
    <dl class="close">
        <dt οnclick="list(this)">一菜单如下</dt>
        <dd><a href="http://www.baidu.com">A菜单1</a></dd>
        <dd>B菜单1</dd>
        <dd>C菜单1</dd>
        <dd>D菜单1</dd>
    </dl>
    
    <dl class="close">
        <dt οnclick="list(this)">二菜单如下</dt>
        <dd>A菜单2</dd>
        <dd>B菜单2</dd>
        <dd>C菜单2</dd>
        <dd>D菜单2</dd>
    </dl>
    <dl class="close">
        <dt οnclick="list(this)">三菜单如下</dt>
        <dd>A菜单3</dd>
        <dd>B菜单3</dd>
        <dd>C菜单3</dd>
        <dd>D菜单3</dd>
    </dl>
</body>
</html>

示例 — 好友菜单 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*把表格中的ul进行样式定义
        1.去除无序列表的样式
        2.取消外边距
        */
        table ul {
            list-style: none;
            margin: 0px;
            background-color:#26E356;
            display: none;/*是否显示*/
            /*border: #FF0000 1px solid;查看不同浏览器是否会有缩进*/
            padding:0px;/*设置li内边距*/
        }
        /*对表格框线进行定义
        对单元格的框线进行定义
        */
        table{
            border: #0000FF 1px solid ;
            width: 100px;
        }
        table td{
            border: #0000FF 1px solid ;
            background-color: #F0FF0F;
        }
        table td a:hover{
            color: #FF0000;
        }
        /*单元格中的超链接样式*/
        table td a:link,table td a:visited{
            color: #0000FF;
            text-decoration: none;/*去下划线*/
        }
        /*预定义一些样式*/
        .open{
            display: block;
        }
        .close{
            display: none;
        }
    </style>

</head>
<body>
      <!--
        完成一个有展开闭合效果的好友菜单
        一次只打开一个
      -->
      <script type="text/javascript">
          function list(node){
              //因为浏览器解析方式不同，所以尽量拿父节点
              var oTdNode = node.parentNode;
              var oUlNode = oTdNode.getElementsByTagName("ul")[0];
              //alert(oUlNode.nodeName);

              var oTabNode = document.getElementById("goodlist");
            //  alert(oTabNode);
              var colloulNodes = oTabNode.getElementsByTagName("ul");
            //  alert(oulNodes.length);
              for(var i = 0;i<colloulNodes.length;i++){

                  if(colloulNodes[i] == oUlNode){
                      
                      if(oUlNode.className=="open"){
                          oUlNode.className="close";
                      }else{
                          oUlNode.className="open";
                      }
                  }else{
                      colloulNodes[i].className="close";
                  }
              }
          }
      </script>
    <table id="goodlist">
        <tr>
            <td>
                <a href="javascript:void(0)" οnclick="list(this)">好友列表</a>
                <ul class="close">
                    <li>好友1</li>
                    <li>好友2</li>
                    <li>好友3</li>
                    <li>好友4</li>
                </ul>
            </td>
        </tr>

          <tr>
              <td>
                  <a href="javascript:void(0)" οnclick="list(this)">好友列表</a>
                  <ul >
                      <li>好友1</li>
                      <li>好友2</li>
                      <li>好友3</li>
                      <li>好友4</li>
                  </ul>
              </td>
          </tr>

          <tr>
              <td>
                  <a href="javascript:void(0)" οnclick="list(this)">好友列表</a>
                  <ul>
                      <li>好友1</li>
                      <li>好友2</li>
                      <li>好友3</li>
                      <li>好友4</li>
                  </ul>
              </td>
          </tr>
      </table>
</body>
</html>

u013497151
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
dom编程学习笔记.pdf
11-15
dom编程学习笔记.pdf
JS+DOM编程学习笔记
qq_42192672的博客
01-18 214
总算是把这本书过了一遍，最后还仿照树上做了个小的web前端网站，分享一下收货 链接：https://github.com/woaixiaoyuyu/Web-front-end/tree/master/JavaScript-DOM-_/JS_DOM_JSD...
DOM学习笔记
Princess_ya的博客
07-14 106
dom学习笔记
JavaScript DOM 学习笔记
幸愉编程·信奥编程私教1v1
02-21 823
DOM学习笔记
DOM 学习笔记
erdongmudong的博客
08-13 113
dom目前学习
虚拟浏览器 JSDOM 学习笔记
软件哲学
09-24 3317
这篇文章只是个人学习笔记，所以结构不清，信息不全，建议阅读原版项目手册。   JSDOM 是用nodejs实现的用于测试的虚拟浏览器。 基本例子 const dom = new JSDOM(``, { url: "https://example.org/", referrer: "https://example.com/", contentType: "text/html",...
JavaScript HTML DOM学习笔记.emmx
02-11
从菜鸟教程上学习的关于js的学习笔记，可以用于参考学习使用，脑图样式，浏览更方便，有需要的同学可以带走
JavaScript高级程序设计 DOM学习笔记
10-28
DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。
js DOM的学习笔记
10-28
DOM是Document Object Model文档对象模型的缩写；使用JavaScript操作DOM进行DHTML开发
JS基本功DOM学习笔记
07-12
JS的重要部分DOM的学习笔记，基于传智播客前端培训视频所做的笔记以及相关案例代码，包括事件、DOM节点获取与操作、DOM实用案例、DOM属性操作、元素操作、BOM、内置对象
JavaWeb之Session的序列化和反序列化 && Session的活化和钝化
热门推荐
NotPerfect-EOF
05-16 1万+
应用场景： 1.一般来说，服务器启动后，就不会再关闭了，但是如果逼不得已需要重启，而用户会话还在进行相应的操作，这时就需要使用序列化将session信息保存起来放在硬盘，服务器重启后，又重新加载。这样就保证了用户信息不会丢失，实现永久化保存 2.淘宝每年都会有定时抢购的活动，很多用户会提前登录等待，长时间不进行操作，一致保存在内存中，而到达指定时刻，几十万用户并发访问，就可能会有几十万个ses
JavaWeb之不同Tomcat版本对get、post请求，中文乱码问题
NotPerfect-EOF
05-15 3569
Myeclipse安装时的前期工作空间的编码准备，就不说了 Tomcat8 Tomcat8 public class dd extends HttpServlet { private static final long serialVersionUID = 1L; public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IO
一步一步学习 JQuery (二) 选择器: 基本选择器 && 层次选择器
NotPerfect-EOF
02-21 2394
JQuery选择器:
html学习笔记一
NotPerfect-EOF
10-18 2373
PS:在学Java基础的同时，学点html，渣渣不会的东西太多了。。。抓紧学啊 网页设计：html+css+javascript 作为程序员必须了解 html、css、javascript 网页设计是web开发的重要组成部分 html:是一种标记语言，主要用途是开发网页，使用html可以展现文字、图片、视频、声音.... html是web开发（网页开发）的基础 网页设计
一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
NotPerfect-EOF
02-23 2339
过滤选择器： 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器. 一、基本过滤选择器 改变第一个 div 元素的背景色为 # bbffaa 改变最后一个 div 元素的背景色为 # bbffaa 改变cla
JavaWeb之Request && Response篇
NotPerfect-EOF
04-23 2267
一、request概述 request是Servlet.service()方法的一个参数，类型为javax.servlet.http.HttpServletRequest。在客户端发出每个请求时，服务器都会创建一个request对象，并把请求数据封装到request中，然后在调用Servlet.service()方法时传递给service()方法，这说明在service()方法中可以通过requ
html学习笔记二
NotPerfect-EOF
10-19 1952
html图片元素
JavaWeb之Servlet篇
NotPerfect-EOF
04-21 1937
一、Servlet概述 1.什么是Servlet？ Servlet可以说是JavaWeb的核心，属于动态资源。其作用就是处理客户端请求，服务器会把接收到的请求交给Servlet来处理，在Servlet要做的就是： 1.获取请求数据；2，处理请求；3.回复响应给客户端。 每个Servlet必须实现javax.servlet.Servlet接口。 2.Servlet的生命周期方法
一步一步学习 JQuery (四) 过滤选择器:属性过滤选择器 && 子元素过滤选择器 && 表单过滤选择器
NotPerfect-EOF
02-23 1865
四、属性过滤选择器 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 选取下列元素,改变其背景色为 # bbffaa 含有属性title 的div元素. 属性title值等于"test"的div元素. 属性title值不等于"test"的div元素(没有属性title的也将被选中). 属性title值 以"te"开始 的div元素. 属性title值 以"est"
前端学习笔记 javascript
最新发布
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值