网站开发（入门篇四）如何使用原生js操作子父节点

标题：如何使用原生js操作子父节点

相关概念

在html中所有的节点都有一个层级，这个层级所表现出来的关系，我们就称为子父级关系，举个很简单的例子

  <div>
      <p>
          <input type="button" value="切换背景" />
      </p>
      <span>小雅小二郎！</span>
  </div>

<div>我们称为这组代码的根节点，而<p>、<span>我们称为<div>的子节点，反过来<div>是这两个节点的父节点，对于<p>、<span>这两个元素叫做兄弟级元素。

本节任务

• 添加和移除子节点
• 找到元素的祖父，并做一些操作

业务要求

点击页面按钮随机切换<div>背景颜色，并修改<span>标签的文字，再对<div>添加一个子元素<a>跳转到https://www.baidu.com,代码结构如下

<div>
    <p>
        <button>切换背景</button>
    </p>
    <span>小雅小二郎！</span>
</div>

完整代码

<div>
    <p>
        <input type="button" value="切换背景" />
    </p>
    <span>小雅小二郎！</span>
</div>
<script type="text/javascript">
    // 1.找到`button`节点
    var btn = document.querySelector('input[type=button]')
    // 创建生成随机颜色的方法
    var generateColorCode = function () {
        return '#' + (function (color) {
            return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color)
        })('')
    }

    /// 随机生成颜色代码原理，颜色代码是16进制
    /// 1.定义十六进制字符
    /// 2.计算随机数Math.random()  从0（包括0）往上，但是不包括1（排除1）
    /// 3.取随机数的整数 Math.floor
    /// 4.通过下标方式取 字符串中的字符
    /// 采用闭包方式调用，当颜色代码等于6位时退出方法

    // 3.给按钮添加点击事件
    btn.addEventListener('click', function (event) {
        // event获取的时 click这个事件的相关信息，元素中target表示该事件作用的目标节点是什么，我们通常可以使用这个特性来做一些操作
        console.log(event);
        console.log(event.target);

        var color = generateColorCode()

        // 对祖父级元素设置背景色  因为祖父级是两层 所以我们调用两次parentElement我们就能拿到该元素了
        var gp = event.target.parentElement.parentElement

        // 我们对颜色进行一个过度的操作，以免太过生硬，请了解css3过度属性
        // gp.style.transitionDuration = '1s' // 设置过度时间
        // gp.style.transitionProperty = 'background-color' // 设置需要被过度的属性  我们是控制背景色，所以添加 background-color
        // gp.style.transitionTimingFunction = 'ease-in-out' // 过度效果  渐入渐出
        // 其实上面三句话可以写为
        gp.style.transition = 'background-color 1s ease-in-out'

        // 到这里我们就实现了点击按钮切换背景颜色了
        gp.style.backgroundColor = color

        // 接下来实现文字的切换，我们讲获取的颜色代码作为文字输出到页面上
        // 1.找到 span标签(因为span标签在子元素的第二个位置，所以通过下表 1 我们就能访问到)
        var sp = gp.children[1]
        // 修改内部文字只需要修改innerText即可
        sp.innerText = color

        // 循环找出是否包含该元素，如果有则移除
        for (var i = 0; i < gp.children.length; i++) {
            var item = gp.children[i]
            if (item.tagName.toLowerCase() === 'a') {//该元素的tagName转小写是否是a标签的tageName
                gp.children.removeChild(item)
            }
        }
        // 创建`a`节点
        var a = document.createElement('a')
        a.href = 'https://www.baidu.com'
        a.innerText = "百度"
        gp.appendChild(a)// 将a标签添加到节点
    })
</script>

敲黑板

• 如何通过选择器找到元素？
  document.querySelector('input[type=button]')

• 如何创建随机颜色代码？

  function () {
            return '#' + (function (color) {
                return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color)
            })('')
        }
  

• 创建随机颜色代码原理是什么？

  基本的颜色代码是6位字符的16进制，所以我们只需要构建一个十六进制的字符串即可，颜色代码开头是以#开头。

  • 两个重要函数
    • Math.floor:一个表示小于或等于指定数字的最大整数的数字。(简单来说，取临近的最小整数)
    • Math.random:一个浮点型伪随机数字，在0（包括0）和1（不包括）之间。(简单来说，[0,1) { x | 0≤x<1}
  • [0,1)随机数 * 16 =>[0~15]的随机数，再通过下标取十六进制字符串0123456789abcdef的某一个字符
  • 使用闭包函数+递归调用（跳出递归函数）条件为，颜色代码为6位，多次执行后得出6位16进制颜色代码

• 如何给节点添加事件？

  addEventListener('event-name',function(){})这里给出event-name的相关资料

• 如何获取父级节点/元素？

  Element.parentElement，那多级父元素怎么调用呢？答：那就多点几次咯

• 如何创建节点?

  document.createElement(elementName)

• 如何移除、添加子元素

  Element.removeChild(child)、Element.appendChild(child)

事儿后分析

首先分析我们需要执行的步骤

1. 找到button节点
2. 创建生成随机颜色的方法
3. 给button添加click事件
4. 通过事件的target属性获取按钮节点，再通过节点属性parentElement找到祖父元素
5. 设置祖父元素背景色+过度效果
6. 修改子节点span的文本内容
7. 创建一个节点a并追加到div中，如果存在，则移除该节点

扩展思考

JQuery中操作字符节点方式，又有什么区别？