1.如何获取节点

  1. 四种方法：
  2. getElementById()        //Id
  3. getElementsByTagName()   //标签名
  4. getElementsByClassName() //class名
  5. getElementsByName    
  6. querySelectorAll()   //选择器

1.1通过id获取

  1. <p id="test">hello world</p>
  2. <script>
  3.   /*html 标签 --节点*/
  4.   /*DOM树  就是由一个个节点组成
  5.   节点的关系：父子关系，兄弟关系
  6.   1.如何获取一个DOM  如何获取一个html元素
  7.   */
  8.   var test=document.getElementById("test");
  9.   /*2.改变背景色*/
  10.   test.style.backgroundColor="#333";
  11.   console.log(test);
  12. </script>

实现以下例子


第一节 DOM - 图1

通过name/class name/querySelector获取

  1. <p name="test" class="one">hello world</p>
  2. <script>
  3.  /* 
  4.    id  直接获取的元素
  5.    class,tagName    HTMLCollection html集合
  6.    name,querySelector  通过选择器获取  nodelist
  7. */
  8.    /* 通过name nodelist  节点的集合 */
  9.     var p=document.getElementsByTagName('p');
  10.     var test=document.getElementsByName("test")
  11.     var one=document.querySelectorAll('.one');
  12.     console.log(p)
  13.     console.log(test)
  14.     console.log(one)
  15. </script>
  1. <button id="all">全选</button>
  3.     <br>
  5.     <button id="noAll">不选</button>
  7.     <br>
  9.     <button id="reverse">反选</button>
  11.     <br>
  13.     <input type="checkbox">篮球
  15.     <br>
  17.     <input type="checkbox">足球
  19.     <br>
  21.     <input type="checkbox">高尔夫
  23.     <br>
  25.     <input type="checkbox">橄榄球
  27.     <br>
  29.     <input type="checkbox">乒乓球
  31.     <br>
  33.     <script>
  35.         var all = document.getElementById("all");
  37.         var noAll = document.getElementById("noAll");
  39.         var reverse = document.getElementById("reverse");
  41.         var checks = document.getElementsByTagName("input");
  43.         all.onclick = function () {
  45.             for (var i = 0; i < checks.length; i++) {
  47.                 checks[i].checked = true;
  49.             }
  51.         }
  53.         noAll.onclick = function () {
  55.             for (var i = 0; i < checks.length; i++) {
  57.                 checks[i].checked = false;
  59.             }
  61.         }
  63.         reverse.onclick = function () {
  65.             for (var i = 0; i < checks.length; i++) {
  67.                 console.log(inputs[i].checked);
  69.                 checks[i].checked = (checks[i].checked == true) ? false : true;//三目
  71.                 /*inputs[i].checked=!inputs[i].checked;     //取反*/
  73.             }
  75.         }
  77.     </script>

实现：
点击button按钮,如果div是显示的则隐藏,如果隐藏则显示
1.1用DOM实现

  1. <div id="div" style="display:block">hello world</div>
  2. <button id="btn">切换</button>
  3. <script>
  4.         var div = document.getElementById("div");
  5.         var btn = document.getElementById("btn");
  6.         btn.onclick = function(){
  7.             var value = div.style.display;
  8.             if(value == "block"){
  9.                       div.style.display = "none"
  10.             }else{
  11.                 div.style.display = "block"
  12.             }
  13.         }
  14. </script>

1.2用js实现

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. <body>
  3.   <div id="test" style="display: block">hello world</div>
  4.   <button id="btn">切换</button>
  5.   <script>
  6.      $("#btn").click(function(){
  7.         /* is(':visible')判断一个元素是否显示 */
  8.       var isShow=$("#test").is(":visible")
  9.       if(isShow){
  10.           $("#test").hide(300)
  11.       }else{
  12.           $("#test").show(300)
  13.       }
  14.    })        
  15.   </script>
  16. </body>

1.3

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2. <body>
  3.    <div id="test" >hello world</div>
  4.   <button id="btn">切换</button>
  5.   <script>
  6.     $("#btn").click(function(){
  7.       /* toggle()   集成了hide(),show() */
  8.     $("#test").toggle(300)
  9.     })
  10.   </script>
  11. </body>

2.实现隔行变色

  1. <!-- 偶数项字体颜色为粉色  奇数项字体颜色为绿色 -->
  2.     <ul>
  3.         <li>0</li>
  4.         <li>1</li>
  5.         <li>2</li>
  6.         <li>3</li>
  7.         <li>4</li>
  8.     </ul>
  9.   <script>
  10.         var lis=document.getElementsByTagName("li")
  11.         /* 1.对li进行遍历 */
  12.         for(var i=0;i<lis.length;i++){
  13.             /* 2.下标值取余%2  为零的情况为偶数 */
  14.             if(i%2==0){
  15.                 lis[i].style.color="pink"
  16.             }else{
  17.                 lis[i].style.color="green"
  18.             }
  19.         }
  20.  </script>

2.通过下标读取DOM

  1. <div class="one">hello world</div>
  2. <div class="one">hello world</div>
  3. <div class="one">hello world</div>
  4. <script>
  5.         /* 通过class  获取的是HTMLCollection,html的集合，它长得像数组，但不是数组
  6.         length  获取集合的长度 
  7.         可以通过下标去读取
  8.         */
  9.         var one=document.getElementsByClassName("one");
  10.         console.log(one)
  11.         console.log(Array.isArray(one))
  12.         one[2].style.color="red";
  13.  </script>

3.节点的分类

  1. 元素节点  nodeType==1
  2. 属性节点  nodeType==2
  3. 文本节点  nodeType==3

4.获取第一个节点/元素节点

  1. firstChild   //获取第一个节点
  2. firstElementChild  //获取第一个元素节点
  1.    <div id="parent">ffid<p>hello world</p></div>
  3.     <script>
  5.        /* 
  7.        节点
  9.        元素节点  nodeType==1
  11.        属性节点  nodeType==2
  13.        文本节点  nodeType==3
  15.         */ 
  17.         /* firstChild  -->输出第一个节点 
  19.            firstElementChild  -->输出第一个元素节点
  21.         */
  25.         var parent=document.getElementById("parent");
  27.         var tNode=parent.firstChild;
  29.         var aNode=parent.getAttributeNode("id");
  31.         console.log(parent.firstChild);    //ffid
  33.         console.log(parent.firstElementChild);   //hello world
  35.         console.log(parent.nodeType)    //1
  37.         console.log(tNode.nodeType)    //3
  39.         console.log(aNode.nodeType)    //2
  41.     </script>

5.如何创造元素/文本节点

hello world

  1. var p=document.createElement("p")     //元素节点
  2. var text=document.createTextNode("p")  //文本节点
  3. p.appendChild(txt)     //将元素节点添加到文本节点中

6.增，删，改，查

4.1增加节点 appendChild

  1. <div id="parent">
  2.    <div id="good">good</div>
  3. </div>
  4. <script>
  5.   var parent=document.getElementById("parent")
  6.   var good=document.getElementById("good")
  7.   var p=document.createElement("p")
  8.   p.innerHTML="hello world";
  9.    /* 
  10.    appendChild
  11.    给元素增加节点   往后面增加
  12.   */
  13.   parent.appendChild(p);    //good   hello world
  14. </script>

4.2在父元素前面增加节点insertBefore(newChild,oldChild)

  1.  <div id="parent">
  2.         <p>第一个</p>
  3.     </div>
  4.     <script>
  5.         /* 
  6.         从父元素的前面插入一个节点
  7.         insertBefore(newChild,oldChild)
  8.          */
  9.         var parent=document.getElementById("parent");
  10.         var p=document.createElement("p");
  11.         var txt=document.createTextNode("第零个");
  12.         p.appendChild(txt)
  14.         parent.insertBefore(p,parent.firstElementChild)
  15.     </script>

4.3删除节点 removeChild

  1. <div id="parent">
  2.    <div id="good">good</div>
  3.    <div id="hi">hi</div>
  4. </div>
  5. <script>
  6.   var parent=document.getElementById("parent")
  7.   var good=document.getElementById("good")
  8.   var hi=document.getElementById("hi")
  9.   var p=document.createElement("p")
  10.   p.innerHTML="hello world";
  11.   /*
  12.   removeChild() 从DOM树上移除一个元素
  13.   */
  14.   parent.removeChild(good);  //hi
  15. </script>

4.4修改—替换replaceChild

  1.    <div id="parent">
  2.         <p>good</p>
  3.         <!-- <h2>标题</h2> -->
  4.         <!-- 将p替换为h2-->
  5.     </div>
  6.     <script>
  7.         /* DOM就是增删改查元素的标准，可以动态的修改元素的内容，样式，结构 */
  8.         var parent =document.getElementById("parent");
  9.         var p=document.getElementsByTagName("p")[0];
  10.         var h2=document.createElement("h2");
  11.         h2.innerHTML="标题";
  12.         /* 
  13.         修改--替换DOM节点
  14.         replaceChild(newChild,oldChild)
  15.          */
  16.         parent.replaceChild(h2,p)
  17.     </script>

4.5克隆节点 cloneNode

  1. <p class="test">hello world</p>
  2.     <script>
  3.     /* 克隆节点 cloneNode */
  4.         var test=document.getElementsByClassName("test")[0];
  5.         var cTest=test.cloneNode(true);
  6.         document.body.appendChild(cTest)
  7.     </script>

7.判断某个元素是否有某个class

  1. obj.classList.contains()

8.给元素添加一个class:className

  1. <style>
  2.   .current{
  3.      color:pink;
  4.    }
  5. </style>
  7. <body>
  8. <div id="test">hello world</div>
  9.     <script>
  10.        var test=document.getElementById("test");
  11.        /* className */
  12.        test.onclick =function(){
  13.         /* obj.classList.contains()  -->判断某个元素是否有某个class */
  14.         if(this.classList.contains("current")){
  15.             this.className=""
  16.         }else{
  17.             this.className="current"
  18.         }
  19.        }
  20.    </script>
  21.  </body>

9.dataset 自定义属性

  1.  <!--  data-   :自定义属性 -->
  2.     <div id="test" class="one" data-uid="two">hello world</div>
  3.     <script>
  4.         var test=document.getElementById("test");
  5.         console.log(test.id)
  6.         console.log(test.className)
  7.         console.log(test.dataset.uid)
  8.     </script>

10.修改节点内容、样式、结构

改变样式：this.style.color=”red”

改变内容: this.innerHTML=”change”

  1. <div id="test">hello world</div>
  2.     <script>
  3.         /* 内容，样式，结构 */
  4.         var test=document.getElementById("test");
  5.         /* 
  6.         事件
  7.         onclick   点击事件
  8.         onmouseover  移动到指定对象时触发事件
  9.         onmouseout   移出对象时触发事件
  10.          */
  11.         test.onclick=function(){
  12.             /* this在事件中指向正在执行事件的当前对象  改变样式*/
  13.             this.style.color="red";
  14.             /* innerHTML 改变内容*/
  15.             this.innerHTML="change"
  16.         }
  18.     </script>

例题

实现点击跳转nav

  1. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  2.     <style>
  3.         .container>div{
  4.             height: 1000px;
  5.         }
  6.         .container>div:nth-child(1){
  7.             background: red;
  8.         }
  9.         .container>div:nth-child(2){
  10.             background: green;
  11.         }
  12.         .container>div:nth-child(3){
  13.             background: pink;
  14.         }
  15.         .container>div:nth-child(4){
  16.             background: blue;
  17.         }
  18.         .nav{
  19.             position: fixed;
  20.             top: 0;
  21.             line-height: 50px;
  22.             background: #eee;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="nav">
  28.         <a href="#html">html</a>
  29.         <a href="#css">css</a>
  30.         <a href="#javascript">javascript</a>
  31.         <a href="#vue">vue</a>
  32.     </div>
  33.     <div class="container">
  34.         <div  id="html">html</div>
  35.         <div id="css">css</div>
  36.         <div id="javascript">javascript</div>
  37.         <div id="vue">vue</div>
  38.     </div>
  39.     <script>
  40.         /* obj.offset().top  获取元素距离顶部的距离 
  41.         attr(param)  获取元素的属性
  42.         $('html,body').animate({scrollTop:param})
  43.         */
  44.         $(".nav a").click(function(){
  45.             /* 1.获取当前元素对应跳转的元素距离顶部的高度 */
  46.             var attr=$(this).attr("href");
  47.             var top=$(attr).offset().top;
  48.             console.log(attr);
  49.             console.log(top);
  50.             /* 2.让窗口滚动对应的高度 */
  51.             $("html,body").animate({scrollTop:top})
  52.              return false;
  53.         })
  54.     </script>