1.什么是DOM?

W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、样 式和结构。
HTML Dom是关于如何增,删,改,查 HTML 元素的标准。

1.查询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.         var one=document.getElementsByClassName("one");
  9.         console.log(one)
  10.         console.log(Array.isArray(one))
  11.     </script>


捕获.PNG

2.html标签 —>节点

  1. DOM树 就是由一个个节点组成<br />    节点的关系：父子关系，兄弟关系

1.如何获取节点

  1. getElementById()
  2. getElementsByTagName() //元素
  3. getElementsByClassName() //class
  4. getElementsByName()
  5. querySelectorAll()  //选择器   var one = document.querySelectorAll('.one');
  1.     <p id="test">hello world</p>
  2.     <script>
  3.     /*1.获取一个DOM 如何获取一个html元素 */
  4.     var test=document.getElementById("test");
  5.     /* 2.改变背景色 */
  6.     test.style.backgroundColor="#333";
  7.     console.log(test);
  8.     </script>

捕获.PNG

实现以下例子
捕获.PNG

  1. eg：
  2.     <button id="all">全选</button>
  3.     <br>
  4.     <button id="noAll">不选</button>
  5.     <br>
  6.     <button id="reverse">反选</button>
  7.     <br>
  8.     <input type="checkbox">篮球
  9.     <br>
  10.     <input type="checkbox">足球
  11.     <br>
  12.     <input type="checkbox">高尔夫
  13.     <br>
  14.     <input type="checkbox">橄榄球
  15.     <br>
  16.     <input type="checkbox">乒乓球
  17.     <br>
  18.     <script>
  19.         /* 有一个时间必然有一个结果 执行onclick，后面就有一个=function(){}*/
  20.         var all=document.getElementById("all");  //首先选中这个按钮
  21.         var noAll=document.getElementById("noAll")
  22.         var reverse=document.getElementById("reverse")
  23.         var inputs=document.getElementsByTagName("input");
  24.         all.onclick=function(){
  25.             for(var i=0;i<inputs.length;i++){
  26.                 inputs[i].checked=true; //input输入框的每一项
  27.             }
  28.         }
  29.         noAll.onclick=function(){
  30.             for(var i=0;i<inputs.length;i++){
  31.                 inputs[i].checked=false;
  32.             }
  33.         }
  34.         reverse.onclick=function(){
  35.             for(var i=0;i<inputs.length;i++){
  36.                 // console.log(inputs[i].checked)
  37.                 // inputs[i].checked=(inputs[i].checked==true)?false:true;
  38.                 inputs[i].checked=!inputs[i].checked;
  39.             }
  40.         }
  41.     </script>

实现：
点击button按钮，如果div是显示的则隐藏，如果隐藏则显示

  1. <head>
  2.     <style>
  3.         #div{
  4.             width:100px;
  5.             height:100px;
  6.             background: red
  7.         }
  8.     </style>
  9. </head>
  10. <body>
  11.     <div id="div" style="display:block">
  12.     </div>
  13.     <button id="btn">
  14.         切换
  15.     </button>
  16.     <script>
  17.         var div = document.getElementById("div");
  18.         var btn = document.getElementById("btn");
  19.         btn.onclick = function () {
  20.             var value = div.style.display;
  21.             if (value == "block") {
  22.                 div.style.display = "none"
  23.             }else{
  24.             div.style.display = "block"
  25.         }
  26.       }
  27.     </script>

Chrome下获取外部样式

  1. getComputedStyle(div,null)[attr]

2.修改元素节点的内容，样式

  • 修改元素节点的内容
  1. innerHTML
  • 修改样式
  1. object.style.color="pink";
  2. object.style["color"]="pink";
  • 隔行变色

1566819207664-d2579f13-eb04-4375-abea-669676b97e94.png

  1.     <!-- 偶数项 字体颜色为红色 奇数项字体颜色为蓝色 -->
  2.    思路：对li进行遍历，if判断是偶数为红色，否则为蓝色
  3. <ul>
  4.     <li>0</li>
  5.     <li>1</li>
  6.     <li>2</li>
  7.     <li>3</li>
  8.     <li>4</li>
  9. </ul>
  10. <script>
  11.     var lis=document.getElementsByTagName("li")
  12.     console.log(lis)
  13.     for(var i=0;i<lis.length;i++){   //1.对li进行遍历
  14.         if(i%2==0){                  //2.下标值取余%2 为零的情况为偶数
  15.             // console.log(lis[i])
  16.             lis[i].style.color="red"
  17.         }else{
  18.             lis[i].style.color="blue"
  19.         }
  20.     }
  21. </script>
  • className 如何判断一个元素是否拥有某个class? classList.contains()
  1. 效果：点击一下变黄色，再点击一下恢复
  2.     <style>
  3.         .current{
  4.             color:orange;
  5.         }
  6.     </style>  
  7.    <div id="test">hello world</div>
  8.     <script>
  9.         var test=document.getElementById("test");
  10.         // test.className="one"
  11.         test.onclick=function(){
  12.             if(this.classList.contains("current")){
  13.                 this.className=""
  14.             }else{
  15.                 this.className="current"
  16.             }
  17.         }
  18.     </script>

3.节点的分类nodeType

  1. a.nodeType==1 为元素节点
  2. b.nodeType==2 为属性节点
  3. c.nodeType==3 为文本节点
  5. getAttributeNode("id") //返回元素的id属性
  1. <div id="parent"> //元素节点 nodeType==1  id:属性节点 //nodeType==2
  2.     ffsfd         //文本节点 nodeType==3
  3.     <p>hello world</p>  
  4. </div>
  5.         /* 
  6.         firstChild  -->输出第一个节点 
  7.         firstElementChild -->输出第一个元素节点
  8.         */
  9. <script>
  10.         var parent=document.getElementById("parent")
  11.         var tNode =parent.firstChild
  12.         var aNode=parent.getAttributeNode("id")
  13.         console.log(parent.nodeType)   //1
  14.         console.log(tNode.nodeType)    //3
  15.         console.log(aNode.nodeType)    //2
  16. </script>

4.增加获取节点

  • appendChild()
  1. createElement(); //创建元素节点
  2. createTextNode(); //创建文本节点
  3. createAttribute(); //创建属性节点
  5.     <script>
  6.         var p=document.createElement("p");  //创建元素节点p
  7.         var txt=document.createTextNode("hello world"); //创建文本节点
  8.         var attr=document.createAttribute("class");  //创建属性节点
  9.         attr.value="democlass"   //class="democlass"
  10.         p.setAttributeNode(attr)  //把属性添加给p
  11.         p.appendChild(txt);  //把文本添加给p
  12.         document.body.appendChild(p)  //把p添加给body
  13.     </script>

捕获.PNG

  1.     <div id="parent">
  2.         <p>第一个</p>
  3.     </div>
  4.     <script>
  5.         /* 
  6.         从父元素的前面插入节点
  7.         insertBefore(newChild,oldChild) */
  8.         var parent=document.getElementById("parent")
  9.         var p=document.createElement("p");  //创建一个p
  10.         var txt=document.createTextNode("第零个") //第二种方法给p增加内容    1.h2.innerHTML="标题";
  11.         p.appendChild(txt)
  12.         parent.insertBefore(p,parent.firstElementChild)
  13.     </script>
  • parentNode.insertBefore(newNode,targetElementNode)
  1. <ul id="parent">
  2.       <li>hello world</li>
  3. </ul>
  4.     <script>
  5.         var parent = document.getElementById("parent");
  6.         for(let i=0;i<3;i++){
  7.             let li = document.createElement("li");
  8.             li.innerHTML = "java"+i;
  9.             parent.insertBefore(li,parent.firstElementChild)
  10.         }
  11.     </script>

5.删除节点 removeChild()

  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.         // console.log(p)
  10.         /* appendChild() 给元素增加节点 */
  11.         parent.appendChild(p);
  12.         /* romoveChild() 从DOM树上移除一个元素 */
  13.         parent.removeChild(good);
  14.     </script>

6.DOM的修改-替换 replaceChild(newChild,oldChild)

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

7.自定义属性：dataset

  1.     <div id="test" class="one" data-uid="two">hello world</div>
  2.     <script>
  3.         var test=document.getElementById("test")
  4.         console.log(test.id)
  5.         console.log(test.className)
  6.         console.log(test.dataset.uid)
  7.     </script>

捕获.PNG

8.克隆节点

  1.     <p class="test">hello world</p>
  2.     <script>
  3.         /* 克隆节点 */
  4.         var test=document.getElementsByClassName("test")[0];  //不能直接对数组进行操作，要选中中间的一个元素
  5.         var cTest=test.cloneNode(true);
  6.         document.body.appendChild(cTest)
  7.     </script>

捕获.PNG

9.点击跳转nav

  1.   <head> 
  2.     <style>
  3.         .container>div{
  4.             height:800px;
  5.             margin-top: 30px;
  6.         }
  7.         .container>div:nth-child(1){
  8.             background: red;
  9.         }
  10.         .container>div:nth-child(2){
  11.             background: blue;
  12.         }
  13.         .container>div:nth-child(3){
  14.             background: yellow;
  15.         }
  16.         .container>div:nth-child(4){
  17.             background: green;
  18.         }
  19.         .nav{
  20.             position:fixed;
  21.             line-height: 50px;
  22.             background: #eee;
  23.             top:0;
  24.         }
  25.     </style>
  26. </head>
  27. <body>
  28.     <div class="nav">
  29.         <a href="#html">html</a>
  30.         <a href="#css">css</a>
  31.         <a href="#js">javascript</a>
  32.         <a href="#vue">vue</a>
  33.     </div>
  34.     <div class="container">
  35.         <div id="html">html</div>
  36.         <div id="css">css</div>
  37.         <div id="js">javascript</div>
  38.         <div id="vue">vue</div>
  39.     </div>
  40.     <script>
  41.         /* obj.offset().top  获取元素距离顶部的距离
  42.         attr(param)    获取元素的属性 
  43.         $("html,body").animate({scroolTop:params*/
  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.             $("html,body").animate({scrollTop:top})
  51.             return false;
  52.         })
  53.     </script>
  54. </body>