javascript--dom 相关知识点

一 查询节点，获取页面元素

getElementByld() ，通过id获取元素

getElmentsBytTagName()，通过标签名获取节点列表

getElementsByClassName（），通过类名获取节点列表

getElementsByName（），通过名称获取列表

querySelector()， 通过css选择器获取节点

querySelectorAll()，通过css选择器获取节点列表

代码如下：

// Element 多个节点 BY通过  tag 标签  name 名字
            // getElementsByTagName  通过标签名获取多个节点
            // var dom=document.getElementById('dom')
            // console.log(dom,dom.innerText)

            // getElementsByClassName
            // var pS=document.getElementsByTagName('P')
            // console.log(pS,pS[0].innerText)
            
            // var sel=document.getElementsByClassName('sel')
            // console.log(sel,sel[1].innerText)

            // var fav=document.getElementsByName('fav')
            // fav[1].checked=true;
            // console.log(fav)

// querySelector   通过css选择器 去查询节点
            // query 查询  selector  选择器
            // var p=document.querySelector('div p')
            // console.log(p,p.innerText)
            // 选择节点 非常方便 填写css选择器
            // var p2=document.querySelector('div p:last-of-type')
            // console.log(p2,p2.innerText)

            // queryselectorAll  通过css选择器来获取节点列表
            // var ps=document.querySelectorAll('div p')
            // ps.forEach(function (item){
            //  console.log(item,item.innerText)
            // }  )

            

二、 遍历节点

使用for循环来遍历、

转换为数组Array.from（）forEach

转换为数组  for of

代码如下：

// 节点遍历
            // var ps=document.getElementsByName('p')
            // for(var i=0;i<ps.length;i++){
            //  console.log(ps[i],ps[i].innerText)
            // }

            // 转化为数组
            // var arr=Array.from(ps)
            // arr.forEach(function(elem){
            //  console.log(elem,elem.innerText)
            // })

三、改变层内容

innerText：获取改变文本内容

innerHTML： 获取改变html内容

代码如下

    // 修改层

html
        // <!-- <button type="button" οnclick="changeIt()">更改层内容</button>
        // <div>
        //     我喜欢王者
        // </div>

js

            // function changeIt(){
            //  var div= document.querySelector('div');
            //  // div.innerText='我还是喜欢lol'
            //  div.innerHTML='我还是喜欢lol'
            // }

四、获取表单值

value 获取改变表单值

checked 修改

checkbox 是否勾选

代码如下：

<input type="text" name="season"  value="男">
 <input type="text" name="season"  value="女">
  <input type="text" name="season"  value="男人">
   <input type="text" name="season"  value="女人"><br>
   <input type="button" value="显示input内容" οnclick="show()">
    <input type="button" value="显示season内容" οnclick="show(

// function show(){
            //     var str=''
            //     // 获取所有input
            //     var inp=document.querySelectorAll('input')
            //     // 遍历inp 把value 追加到str
            //     inp.forEach(function  (item) {
            //         str+=item.value+'<br>'
            //     }  )
            //     tp.innerHTML=str
            // }
            // function show(){
            //     var str=''
            //     var seasons= document.getElementsByName('season')
            //     seasons.forEach( function (item) {
            //         str+=item.value+'<br>'
            //     })
            //     tp.innerHTML=str
            // }

五、 通过style修改样式

修改宽度样式：elem.style.width=400px

修改字体大小：elem.style.fontsize=32px

也可以获取行内样式：elem.style.width 

代码如下：

// var links = document.querySelectorAll('.link')
            // links.forEach(function(item) {
            //     console.log(item);
            //     var art = item.querySelector('.art')
            //     item.onmouseover = function() {
            //         art? art.style.display = 'block':''    ;
            //     }
            //     item.onmouseout = function() {
            //         art? art.style.display = 'none':'';
            //     }
            // })

六 通过classlist 修改类名 修改样式

classlist.toggle:切换类名

classlist.add：添加类名

classlist.remove：删除类名

classlist.contains：检查是否包含

代码如下：

    // function change() {
            //     var div = document.getElementById('a1');
            //     div.classList.toggle('hide');
            //      alert(div.style.width)  
            // classList.toggle  切换类名
            // classList.add 添加类名
            // classlist.remove 移除类名
            // classlist.contains 检查是否包含
            // }