需求解决 _按条件显示标签 _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