第二章控制语句 DOM ,BOM, 事件 - 第一节 DOM - 《JavaScript 从入门到进阶》

[TOC]

什么是DOM?

DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
整个DOM体系可以用一棵DOM树来表示。
DOM树是由一个个节点组成
第一节 DOM - 图1
上图可知，在HTML中，一切都是节点；

元素节点：Html标签（nodeType==1）
属性节点：标签的属性（nodeType==2）
文本节点：标签中的文字（nodeType==3）

1.如何获取节点

四种方法：
getElementById()         //Id       以对象返回该元素（在 myElement 中）
getElementsByTagName()   //标签名   结果是伪数组（集合）
getElementsByClassName() //class名  伪数组（集合）
getElementsByName        //name名   伪数组（集合）
querySelector()          //选择器名  只返回第一个匹配的元素
querySelectorAll()       //选择器名  返回所有匹配到的元素 
例如：var x = document.querySelectorAll("p.intro");

1.1通过id获取

//1.通过id获取元素
var test=document.getElementById("test");
//2. 改变样式：
test.style.backgroundColor="#333";

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

1.2通过name/class name/querySelector获取

<p name="test" class="one">hello world</p>
<script>
 /* 
   id  直接获取的元素
   class,tagName    HTMLCollection html集合
   name,querySelector  通过选择器获取  nodelist
*/
   /* 通过name nodelist  节点的集合 */
    var p=document.getElementsByTagName('p');
    var test=document.getElementsByName("test")
    var one=document.querySelectorAll('.one');
    console.log(p)
    console.log(test)
    console.log(one)
</script>

实现以下例子

第一节 DOM - 图2

<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 checks = document.getElementsByTagName("input");
        all.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = true;
            }
        }
        noAll.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = false;
            }
        }
        reverse.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                console.log(inputs[i].checked);
                checks[i].checked = (checks[i].checked == true) ? false : true;//三目
                /*inputs[i].checked=!inputs[i].checked;     //取反*/
            }
        }
    </script>

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

<div id="div" style="display:block">hello world</div>
<button id="btn">切换</button>
<script>
        var div = document.getElementById("div");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var value = div.style.display;
            if(value == "block"){
                      div.style.display = "none"
            }else{
                div.style.display = "block"
            }
        }
</script>

1.2用js实现

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body>
  <div id="test" style="display: block">hello world</div>
  <button id="btn">切换</button>
  <script>
     $("#btn").click(function(){
        /* is(':visible')判断一个元素是否显示 */
      var isShow=$("#test").is(":visible")
      if(isShow){
          $("#test").hide(300)
      }else{
          $("#test").show(300)
      }
   })        
  </script>
</body>

1.3

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<body>
   <div id="test" >hello world</div>
  <button id="btn">切换</button>
  <script>
    $("#btn").click(function(){
      /* toggle()   集成了hide(),show() */
    $("#test").toggle(300)
    })
  </script>
</body>

2.实现隔行变色

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

2.通过下标读取DOM

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

3.节点的分类 /节点的属性？

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

属性：
通过JavaScript，可以使用以下节点属性在节点之间导航

parentNode
childNodes[nodenumber] //子节点们
firstChild //首个子节点
lastChild
nextSibling
prebviousSibling
nodeName //只读的属性规定节点的名称（比如元素节点的nodeName等同于标签名称/属性名称/#text/#document）
nodeValue //属性规定节点的值
nodeType // 只读的属性返回节点的类型
innerHTML //innerHTML 属性1.设置或2.返回表格行的开始和结束标签之间的 HTML ```javascript // 访问文本节点的值？三种方法

var myTitle = document.getElementById(“demo”).innerHTML; var myTitle = document.getElementById(“demo”).firstChild.nodeValue; var myTitle = document.getElementById(“demo”).childNodes[0].nodeValue;

<a name="Ly6RR"></a>
### 4.获取第一个节点/元素节点
```javascript
firstChild   //获取第一个节点
firstElementChild  //获取第一个元素节点

   <div id="parent">ffid<p>hello world</p></div>
    <script>
       /* 
       节点
       元素节点  nodeType==1
       属性节点  nodeType==2
       文本节点  nodeType==3
        */ 
        /* firstChild  -->输出第一个节点 
           firstElementChild  -->输出第一个元素节点
        */

        var parent=document.getElementById("parent");
        var tNode=parent.firstChild;
        var aNode=parent.getAttributeNode("id");
        console.log(parent.firstChild);    //ffid
        console.log(parent.firstElementChild);   //hello world
        console.log(parent.nodeType)    //1
        console.log(tNode.nodeType)    //3
        console.log(aNode.nodeType)    //2
    </script>

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

如需向 HTML DOM 添加新元素，您必须首先创建这个元素（元素节点），然后将其追加到已有元素。

在后面加

createElement
createTextNode
appendChild
appendChild

在前面加

createElement
createTextNode
appendChild

inserBefore

var p=document.createElement("p")     //元素节点
var text=document.createTextNode("这是一段新的文本节点")  //文本节点
p.appendChild(txt)     //将元素节点添加到文本节点中
document.getElementById('div1').appendChild(p);  //将创建的元素追加到已有的元素中文档中。

```javascript

这是一个段落。

这是另一个段落。

第一节 DOM