javaScript - 二、DOM - 《Javascript》

二、DOM基础

二、DOM基础

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

2-1、html标签 —节点

DOM树就是由一个个节点组成

节点的关系：父子关系，兄弟关系

1. 如何获取节点

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()
querySelectorAll()

<p id="text">hello world</p>
<script>  
var test = document.getElementById("text");
/* 改变背景色 */
test.style.backgroundColor = "pink";
console.log(test);
</script>

2-2、查询DOM

通过class 获取的是HTMLCollection,html的集合。它长的像数组

 length 获取集合的长度<br />       可以通过下标去读取

<div class="one">hello world</div>
  <script>
      var one = document.getElementsByClassName("one");
      console.log(one)
      console.log(Array.isArray(one))
      one[0].style.color="red";
  </script>

2-3、class等集合

class,tagName HTMLCollection html集合
id 直接获取的元素
class HTMlCollection html集合
tagName nodelist
querySelector 通过选择器获取 nodelist
通过name nodelist 节点的集合

<p name="test" class="one">hello world</p>
  <script>
      var p = document.getElementsByTagName('p');
      var test = document.getElementsByTagName("test")
      var one = document.querySelectorAll('.one');
      console.log(p)
      console.log(test)
      console.log(one)
  </script>

2-4、实例（全选、不选、反选）

 <button id="all">全选</button>
    <br>
    <button id="noAll">不选</button>
    <br>
    <button id="reverse">反选</button>
    <br>
    <input type="checkbox">篮球
    <br>
    <input type="checkbox">足球
    <br>
    <input type="checkbox">高尔夫
    <br>
    <input type="checkbox">橄榄球
    <br>
    <input type="checkbox">乒乓球
    <br>
    <script>
        var all = document.getElementById("all");
        var noAll = document.getElementById("noAll");
        var reverse = document.getElementById("reverse");
        var inputs = document.getElementsByTagName("input");
        all.onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
            }
        }
        noAll.onclick = function(){
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = false;
            }
        }
        reverse.onclick = function(){
            for(var i=0;i<inputs.length;i++){
                // console.log(inputs[i].checked)
                //inputs[i].checked = (inputs[i].checked==true)?false:true;
                inputs[i].checked = !inputs[i].checked;
            }
        }
    </script>

2-5、增删改查

1、增加获取节点

parentNode.appendChild()
parentNode.insertBefore(newChild,oldChild)

2、删除节点

removeChild()

<div id="parent">
      <!-- <p>hello world</p> -->
      <div id="good">good</div>
  </div>
  <script>
      /* 增，删，改，查 */   
      var parent =document.getElementById("parent");
      var p =document.getElementById("good");
      var p =document.createElement("p");
      p.innerHTML = "hello world"
      parent.appendChild(p);
      parent.removeChild(good);
  </script>

parentNode.insertBefore(newChild,oldChild)

<div id="parent">
        <p>第一个</p>
    </div>
    <script>
   /*
        从父元素的前面插入一个节点
         insertBefore(newChild,oldChild) 
        */
        var parent = document.getElementById("parent");
        var p = document.createElement("p");
        var txt = document.createTextNode("第零个");
        p.appendChild(txt)

        parent.insertBefore(p,parent.firstElementChild)
    </script>

3、修改-替换

parentNode.replaceChild(newNode,oldNode)

<div id="parent">
      <p>good</p>
  </div>
  <script>
      var parent = document.getElementById("parent");
      var p = document.getElementsByTagName("p")[0];
      var h2 = document.createElement("h2");
      h2.innerHTML = "标题";
     parent.replaceChild(h2,p)
  </script>

2-6、className判断某个元素是否有某个class

obj.classList.contains() —>判断某个元素是否有某个class

<style>
          .current{
              color:orange;
          }
  </style>
  </head>
  <body>
      <div id="test"  >hello world</div>
      <script>
          var test = document.getElementById("test");
          /* className */
          test.onclick = function(){
              /*  */
             if(this.classList.contains("current")){
                 this.className = ""
             }else{
                 this.className = "current"
             }
          }
      </script>

2-7、节点

节点分类

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

获取节点

firstChild —>获取第一个节点

firstElementChild —>获取第一个元素的节点

<div id="parent">
      qqqq
      <p>hello world</p>
  </div>
  <script>
     var parent = document.getElementById("parent");
     var tNode = parent.firstChild;
     var aNode = parent.getAttributeNode("id");
     console.log(parent.firstElementChild)  
     console.log(parent.nodeType)
     console.log(tNode.nodeType)
     console.log(aNode.nodeType)
  </script>

2-8、dataset

<!-- 自定义属性 -->
  <!-- data -->
  <div id="test" class="one" data-uid="two">hello world</div>
  <script>
      var test = document.getElementById("test");
      console.log(test.id)
      console.log(test.className)
      console.log(test.dataset.uid)
  </script>

2-9、克隆

node.cloneNode(true)

<p id="test">hello world</p>
  <script>
      /* 克隆节点 */
      var test = document.getElementsByClassName("test")[0];
      var cTest = test.cloneNode(true);
      document.body.appendChild(cTest)
  </script>

二、DOM