需求解决 _按条件显示标签 _20210827

需求解决 _按条件显示标签 _20210827

1、可以使用操作DOM的方式

// document.getElementById("EleId").style.visibility="hidden";'设置EleId标签隐藏
// document.getElementById("EleId").style.visibility="visible";设置EleId标签显示

2、可以使用jQuery函数

if(notice.remand === 'false'){
   $(".remand-js").hide(); // 设置 class为 remand-js 的标签隐藏
}else if(notice.remand === 'true'){
   $(".remand-js").show(); // 设置 class为 remand-js 的标签隐藏
 }

项目中实际使用了jQuery 所以我采用了jQuery的方式，刚刚开始尝试了第一种方式 为避免声明 新的 id 使用 通过 Class 获取 DOM 节点的 方式 效果并不理想，为了以后使用方便，查找了 一下 一些获取DOM节点的 方式 罗列在下面：

3、获取DOM节点的方式整理

1.通过DOM提供的方法获取元素

①通过id获取

document.getElementById(“id属性的值”)

 <div id="t_id">通过id获取</div>
 <script>
        var div = document.getElementById('t_id');
        console.log(div);
 </script>     

②通过标签名tagName获取

document.getElementsByTagName(“标签名”)

 <div id="t_1">通过tagName获取</div>
 <div id="t_2">通过tagName获取</div>
 <script>
        var divs = document.getElementsByTagName('div');
        console.log(divs);
 </script>

//document.getElementsByTagName("标签名");返回的是一个伪数组,
//无论获取的是一个标签,还是多个标签,最终都是在数组中存储的

③通过类名class获取

document.getElementsByClassName(‘类名’)

<div class="t_class">通过className获取</div>
<div class="t_class">通过className获取</div>
<script>    
    var divs = document.getElementsByClassName('t_class');
    console.log(divs);
</script>  

④通过name获取

document.getElementsByName(‘name’)

<div name="t_name">通过name获取</div>
<div name="t_name">通过name获取</div>
<script>
    var divs = document.getElementsByName('t_name')；
    console.log(divs);
</script>

⑤通过选择器获取

document.querySelector(“选择器名”); // 返回来的是一个元素对象
document.querySelectorAll(“选择器名”); // 返回来的是该选择器的所有元素对象，一个伪数组,里面保存了多个的DOM对象

<div id="first">第一个</div>
<div>第二个</div>
<script>
    var div_first = document.querySelector('#first');
    var divs = document.querySelectorAll('div');
    console.log(div_first);//返回id=‘first’的元素
    console.log(divs);//返回数组 所有的div元素
</script>

⑥特殊元素获取–body、html

// 获取body元素
element = document.body;
// 获取html元素
element = document.documentElement;

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

①节点概述

网页中的所有内容都是节点（标签、属性、文本、注释 等），在DOM中，节点用node来表示。HTML DOM树中所有的节点均可以通过JavaScript 进行访问，所有HTML元素（节点）均可以被创建、修改和删除。

一般地，节点至少拥有三个基本属性：

nodeType 节点类型
（其中：

• 元素节点nodeType = 1，
• 属性节点nodeType = 2，
• 文本节点nodeType =3（文本节点包含文字、空格、换行等））

nodeName 节点名称
nodeValue 节点值
注意：在实际开发中，节点操作主要操作的是元素节点。

②获取父级节点

<div class="ad">
    <div class="ad_img">
        <img src="">
    </div>
</div>
<script>
    // element.parentNode
    var ad_img = document.querySelector('img');
    //得到的是离元素最近的父级节点（即<div class='ad_img'>），如果找不到父级节点，就返回为null
    console.log(ad_img.parentNode);
</script>

③获取子节点

parentNode.childNodes // (标准)
parentNode.childNodes // 返回包含指定节点的子节点的集合，该集合为及时更新的集合
// 注意：返回值包含了所有的子节点，包括元素节点、文本节点等。

<ul>
    <li>表1</li>
    <li>表2</li>
    <li>表3</li>
    <li>表4</li>
</ul>

 var ul = document.querySelector('ul');
 console.log(ul.childNodes);//此时返回值长度为9.因为包含了5个（文本节点-换行）4个（元素节点li）
 console.log(ul.childNodes[0].nodeType);//获得特定的节点的节点类型（第0个为换行 输出为3）
 console.log(ul.childNodes[1].nodeType);

// 获得第1个/最后1个子节点 
// parentNode.firstChild 、parentNode.lastChild
parentNode.firstChild // 获取第一个子节点
parentNode.lastChild // 获取最后一个子节点
// 获取时包括文本节点还是元素节点，在实际开发中使用该命令，通常会返回文本节点（换行），因此，不推荐使用。

  <ul>
    <li>表1</li>
    <li>表2</li>
    <li>表3</li>
    <li>表4</li>
  </ul>

 var ul = document.querySelector('ul');
    console.log(ul.firstChild);//返回#text 文本节点
    console.log(ul.lastChild);
// firstChild 第一个子节点  lastChild  最后一个子节点  不管是文本节点还是元素节点
// 注意：这种方法通常可以获得元素节点，但是有兼容性问题，IE9以上支持。（因此，推荐另一种方法见4. parentNode.children）

  <ul>
    <li>表1</li>
    <li>表2</li>
    <li>表3</li>
    <li>表4</li>
  </ul>

var ul = document.querySelector('ul');
 console.log(ul.firstElementChild);// 返回 <li>表1</li>
 console.log(ul.lastElementChild);// 返回 <li>表4</li>

// 获得所有的子元素节点
parentNode.children // (非标准)
parentNode. children // 获得所有的子元素节点，其余节点不返回 也是实际开发常用的
parentNode. children // 是非标准的，但是各个浏览器都支持，推荐使用。

  <ul>
    <li>表1</li>
    <li>表2</li>
    <li>表3</li>
    <li>表4</li>
  </ul>

 var ul = document.querySelector('ul');
console.log(ul.children);
console.log(ul.children[0]); //获取第一个子元素节点 <li>表1</li>
console.log(ul.children[ul.children.length-1]); //获取最后一个子元素节点 <li>表4</li>

总结

利用DOM提供的方法获取元素：逻辑性不强，有时比较繁琐
利用节点层级关系（父子节点关系）获取元素：逻辑性强，但是兼容性较差

这两种方式都可以获取元素，按需选择。
参考文章：https://blog.csdn.net/zjhahaha123/article/details/105621746