JavaScript之DOM操作二

4.5 排他思想

案例1:百度换肤

案例2:表格隔行换色

案例3:表单全选取消全选案例

4.6 自定义属性操作

1、获取属性值

  • element.属性 获取属性值
  • element.getAttribute(‘属性’)

区别:

  • element.属性 获取内置属性值(元素本身自带的属性)
  • element.getAttribute(‘属性’) 主要获得自定义的属性,程序员自定义的属性

2、设置属性值

  • element.属性 = ‘值’ 设置内置属性值
  • element.setAttribute(‘属性’,‘值’)

区别:

  • element.属性 设置内置属性值
  • element.setAttribute(’属性‘);主要设置自定义的属性

3、移除属性

  • element.removeAttribute(‘属性’);

案例:tab栏切换

JavaScript之DOM操作二_第1张图片

当鼠标点击上面相应的选项卡(tab),下面内容跟随变化
    
 案例分析:
   	1.tab栏切换有2个大的模块
    2.上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想)修改类名的方式
    3.下面的模块内容,会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面
    4.规律:下面的模块显示内容和上面的选项卡一一对应,相匹配
    5.核心思路:给上面的tab_list里面的所有小li添加自定义属性,属性值从0开始编号
    6.当我们点击tab_list里面的某个小li,让tab_con里面对应序号的内容显示,其余隐藏(排他思想)
<style>
    * {
      
        padding: 0;
        margin: 0;
    }
    
    .tab {
      
        width: 1000px;
        margin: 100px auto;
    }
    
    .tab_list ul {
      
        list-style-type: none;
    }
    
    .tab_list {
      
        height: 38px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    
    .tab_list li {
      
        float: left;
        height: 38px;
        line-height: 38px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
    }
    
    .tab_list .current {
      
        background-color: #c81623;
        color: #fff;
    }
    
    .item {
      
        display: none;
    }
style>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍li>
                <li>规格与包装li>
                <li>售后保障li>
                <li>商品评价(50000)li>
                <li>手机社区li>
            ul>
        div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            div>
            <div class="item">
                规格与包装模块内容
            div>
            <div class="item">
                售后保障模块内容
            div>
            <div class="item">
                商品评价(50000)模块内容
            div>
            <div class="item">
                手机社区模块内容
            div>
        div>
    div>
    <script>
        //获取元素
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        //for循环绑定点击事件
        for (var i = 0; i < lis.length; i++) {
      
            //开始给5个小li设置索引号
            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {
      
                // 1. 上面的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式

                //干掉所有人,其余的li清除 class这个类
                for (var i = 0; i < lis.length; i++) {
      
                    lis[i].className = '';
                }
                //留下我自己
                this.className = 'current';
                //2.下面的显示内容模块
                var index = this.getAttribute('index');
                //干掉所有人 让其余的item 这些div隐藏
                for (var i = 0; i < items.length; i++) {
      
                    items[i].style.display = 'none';
                }
                //留下我自己  让对应的item 显示出来
                items[index].style.display = 'block';
            }
        }
    script>
body>

4.7 H5自定义属性

自定义属性的目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

自定义属性获取是通过getAttribute(‘属性’)获取

但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性

H5给我们新增了自定义属性:

1.设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值

比如
或者使用js设置 element.setAttribute('data-index',2)

2.获取H5自定义属性

  • 兼容性获取 element.getAttribute(‘data-index’);
  • H5新增element.dataset.index 或者 element.dataset[‘index’]
    ie 11才支持

五:节点操作

5.1 为什么学习节点操作

获取元素通常使用两种方式:

1、利用DOM提供的方法获取元素

  • document.getElementByld()
  • document.getElementsByTagName()
  • document.querySelector等
  • 逻辑性不强,繁琐

2、利用节点层级关系获取元素

  • 利用父子兄弟节点关系获取元素
  • 逻辑性强,但是兼容性差

这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单

5.2 节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node表示

HTML DOM树中的所有节点均可通过Javascript 进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。

JavaScript之DOM操作二_第2张图片
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

  • 元素节点 nodeType 为 1
  • 属性节点 nodeType 为 2
  • 文本节点 nodeType 为 3(文本节点包含文字、空格、换行等)

我们在实际开发中,节点操作主要操作的是元素节点

5.3 节点层级

利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系

JavaScript之DOM操作二_第3张图片

1、父级节点

node.parentNode
  • parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null

2、子节点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合

你可能感兴趣的:(JavaScript,学习笔记,javascript)