dom相关对象及操作

最新推荐文章于 2022-10-11 10:37:29 发布

眼缘丶

最新推荐文章于 2022-10-11 10:37:29 发布

阅读量145

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/www658/article/details/124849451

版权

一.查询节点。

获取页面相关内容的一些方法

1.getElementByid（）通过id获取元素

括号内填入想要获取内容的id即可；

var dom = document.getElementById("dom");
console.log(dom,dom.innerText)

2.getElementsByTagName()通过标签名获取节点列表

例如：p input 等标签可获取多个

var ps = document.getElementsByTagName("p");
console.log(ps,ps[0].innerText);

3.gteElementByName（）通过名称获取列表

通过class名获取节点(类似数组的HTML集合)

var sel = document.getElementsByClassName("sle类名class");
console.log(sel,sel[1].innerText);

4.getElementsByName 通过名称来获取 (类似数组的节点列表NodeList)
           var fav = document.getElementsByName("fav");
           fav[1].checked = true; 让第二个选中 checked 选中的意思
           console.log(fav);

5.querySelector（）通过css选择器获取节点

var p = document.querySelector("div .four");

6.querySelectorAll（）通过css选择器获取节点列表

var ps = document.querySelectorAll("div p");

二 . 节点的遍历

节点的遍历，就是把获到的节点列表挨个输出

01 for循环来遍历
           var ps = document.getElementsByTagName("p");
             for(var i=0;i<ps.length;i++){
               console.log(ps[i],ps[i].innerText);
           }

  02 转换为为数组后forEach
           // Array.from（）把类数组元素转换为数组
           // forEach 数组的高阶函数（遍历），传入一个回调函数function
           // 数组元素有多少个 function 就会执行多少次
           // elem当前被遍历的元素
           var arr = Array.from(ps);//转换为数组
           arr.forEach(function(elem){
               console.log(elem,elem.innerText)
           })

三。更改层内容

通过事件进行页面层内容的更改

例1：对下面div里的内容进行修改

<button type="button" οnclick="changeIt()">更改层内容</button>

<div> 我喜欢王者荣耀 </div>

function changeIt(){
               var div = document.querySelector("div");
               // 修改div的内容文本
               // innerText 获取/设置元素文本内容（除html标签）
               // div.innerText = "我还是喜欢<strong>魔兽争霸</strong>";
               // innerHTML 获取/设置元素的html内容
               div.innerHTML = "我还是喜欢<strong>魔兽争霸</strong>";
           }

例2：对文本框内容进行修改

<input type="text" value="人生苦短"/>
<button type="button" οnclick="changeInp()"> 改变文本框的内容</button>

function changeInp(){
               var input = document.querySelector("input");
               // value 获取/设置文本框的值
               input.value = "学前端，月薪过万！";
           }

四。修改style样式

利用js实现对页面样式的修改

例：

#div{
               width: 200px;
               height: 100px;
               border: 2px solid red;
           }

<div id="div">你好样式style </div>
<button type="button" οnclick="changeW()">变宽</button>

function changeW(){
               // 获取div
               var div = document.getElementById("div");
               // 相当于用js写了行内样式
               // 修改div样式
               div.style.width = "400px";
               // 注意font-size写法改成驼峰式 fontSize
               div.style.fontSize = "48px";
           }

注意：   // 如果是行内样式可以访问到
           // 写在style标签里的样式是访问不到的

五.修改元素的显示与隐藏

只需要对相关元素的display进行控制即可

例：

css样式

   #mydiv{
               width: 200px;
               height: 100px;
               border: 2px solid red;
           }

html内容：

<button type="button" οnclick="toggle()">切换</button>
<div id="mydiv">学前端月薪过1.5万</div>

js：

// 通过单击按钮实现div的切换与线上
       function toggle(){
           // 获取到div
           var divs = document.getElementById("mydiv");
           // 获取到display值（第一次默认获取不到）
           var display = divs.style.display;
           // 如果不是为none
           if(display!=="none"){
               // 隐藏
               divs.style.display = "none";
           }else{
               // 显示
               divs.style.display = "block";
           }
       }

六：通过classList 切换元素的display属性实现隐藏与显示

#mydiv{
               width: 200px;
               height: 100px;
               border: 2px solid red;
           }
           .hide{
               display: none;
           }

html内容：

<button type="button" οnclick="toggle()">切换</button>
<div id="mydiv">学前端月薪过1.5万</div>

js：// 通过单击按钮实现div的切换与线上
       function toggle(){
           // 获取到div
           var divs = document.getElementById("mydiv");
           // 如果divs的类列表里面有hide 移除hide没有添加hide
           // console.log(divs.classList);
           divs.classList.toggle("hide");

}

classList的相关操作：
           // classList.toggle() 切换类名
           // classList.add() 添加类名
           // classList.remove() 移除类名
           // classList.contains() 检查是否包含

七：例子下拉菜单的实现

html：

                       </li>
                       <li><a href="">二级菜单3</a></li>
                   </ul>
               </li>

</ul>

</div>

css：

* {
               margin: 0;
               padding: 0;
           }

           ul,
           li {
               list-style: none;
           }

           .nav {
               height: 90px;
               background-color: #ccc;
           }

           .menu>li {
               display: inline-block;
               height: 90px;
               line-height: 90px;
               width: 90px;
               text-align: center;
               vertical-align: middle;
           }

           .menu>li:hover,
           .submenu>li:hover {
               background-color: aquamarine;
           }

           .submenu {
               background-color: #ccc;
               display: none;
           }

           /* 定义三级菜单样式 */
           .link {
               position: relative;
           }

           .submenu .submenu {
               position: absolute;
               width: 90px;
               left: 90px;
               top: 0;
           }

js内容

// link被hover时候，选择到link的子节点submenu 显示
           // 选择到所有的link（菜单）
           var links = document.querySelectorAll(".link");
           // 对links进行遍历
           links.forEach(function(item) {
               console.log(item);
               //item就是links里面的子内容（<li clas="link">的li元素）
               // 选择到link（item）的子节点 submen
               var submenu = item.querySelector(".submenu");
               // 当鼠标移入link（item）
               item.onmouseover = function() {
                   // 让其子节点submenu显示
                   submenu ? submenu.style.display = "block" : '';
                   //通过三元运算符号，有submenu执行代码，没有就执行''
               }
               // 当鼠标移出事件
               item.onmouseout = function() {
                   // 让其子节点 submenu隐藏
                   submenu ? submenu.style.display = "none" : '';
               }
           })
           // onmouseover 当鼠标移入事件 onmouseout当鼠标移出事件

八。实例：实现勾选框的全选
             <h1>全选</h1>
       <input type="checkbox" id="all"> 全选<br/>
       <input type="checkbox">选项1
       <input type="checkbox">选项2
       <input type="checkbox">选项3
       <input type="checkbox">选项4

// 当全选发送变化的时候，所有checkbox非all 值与all的保持一致
           // 获取all
           var all = document.getElementById("all");
           // 获取非all的checkbox
           var checks = document.querySelectorAll("input:not(#all)");
           // onchange事件当表单发生变化时候触发
           all.onchange = function(){
               // 遍历checks，设置元素的checked值为 all的checked值
               checks.forEach(function(item){
                   item.checked = all.checked;
                   //checked为true元素选中 checked值为false 元素不选中
               })
           }
           // 线条checks每个input，当发生变化时候，计算计算已经选中的个数
           // 如果选中的个数等于checks长度那么就说明要设置全选了
           checks.forEach(function(item){
               item.onchange = function(){
                   // 获取已经选中的checkbox
                   // input:not(#all):checked （css3新增选择器）
                   // input选中所有input标签:not(#all)过滤掉id为all的表:checked 留下被选中的checkbox
                   var sel = document.querySelectorAll("input:not(#all):checked")
                   if(sel.length===checks.length){
                       // 如果选中的长度等于checks长度
                       all.checked = true;
                   }else{
                       all.checked = false;
                   }
               }
           })
效果如下：