DOM-概述、DOM_Document对象_创建DOM对象、DOM_Node对象

DOM-概述

概念： Document Object Model 文档对象模型

　　将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为 3 个不同的部分：

　　核心 DOM - 针对任何结构化文档的标准模型

　　　　Document：文档对象

　　　　Element：元素对象

　　　　Attribute：属性对象

　　　　Text：文本对象

　　　　Comment:注释对象

　　　　Node：节点对象，其他5个的父对象

　　XML DOM - 针对 XML 文档的标准模型

　　HTML DOM - 针对 HTML 文档的标准模型

DOM_Document对象_创建DOM对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document对象</title>

</head>
<body>


<!--id为div1的盒子-->
<div id="div1">div1</div>

<!--id为div2的盒子-->
<div id="div2">div2</div>

<!--id为div3的盒子-->
<div id="div3">div3</div>

<!--id为div4的盒子-->
<div class="cls1">div4</div>

<!--id为div5的盒子-->
<div class="cls1">div5</div>

<!--框子-->
<input type="text" name="username">

<script>
  /*
  Document：文档对象
      1. 创建(获取)：在html dom模型中可以使用window对象来获取
          1. window.document
          2. document
      2. 方法：
          1. 获取Element对象：
              1. getElementById()    ： 根据id属性值获取元素对象。id属性值一般唯一
              2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
              3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
              4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
          2. 创建其他DOM对象：
              createAttribute(name)
              createComment()
              createElement()
              createTextNode()
      3. 属性



   */

  //2.根据元素名称获取元素对象们。返回值是一个数组
  var divs = document.getElementsByTagName("div");

  //页面弹窗
  alert(divs.length);

  //3.根据Class属性值获取元素对象们。返回值是一个数组
  var div_cls = document.getElementsByClassName("cls1");

  //页面弹窗
  alert(div_cls.length);


  //4.根据name属性值获取元素对象们。返回值是一个数组
  var ele_username = document.getElementsByName("username");

  //页面弹窗
  alert(ele_username.length);

  //createElement 通过指定名称创建一个元素
  var table = document.createElement("table");

  // 页面弹窗
  alert(table);


</script>
</body>
</html>

DOM_Node对象

Node：节点对象，其他5个的父对象

　　特点：所有dom对象都可以被认为是一个节点

方法：
　　CRUD dom树：

　　　　appendChild()：向节点的子节点列表的结尾添加新的子节点。

　　　　removeChild() ：删除（并返回）当前节点的指定子节点。

　　　　replaceChild()：用新节点替换一个子节点。

属性：

　　　　parentNode 返回节点的父节点。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Node对象</title>
  <style>

/*<!--    所有的div盒子-->*/
    div {

      /*边框1，实线，红色*/
      border: 1px solid red;

    }

    /*id为div1的盒子*/
    #div1 {

      /*宽200*/
      width: 200px;

      /*高200*/
      height: 200px;
    }

    /*id为div2的盒子*/
    #div2 {

      /*宽100*/
      width: 100px;

      /*高100*/
      height: 100px;
    }

    /*id为div3的盒子*/
    #div3 {

      /*宽100*/
      width: 100px;

      /*高100*/
      height: 100px;
    }

  </style>

</head>
<body>

<!--设置盒子名称为div1-->
<div id = "div1">

<!--  设置盒子名称为div2-->
  <div id = "div2">div2</div>

<!--  di为div1盒子的内容-->
  div1
</div>

<!--a标签 超链接 名字为del-->
<!--<a href = "javascript:void(0);" id = "del">删除子节点</a>-->

<!--超链接，名字为add-->
<a href = "javascript:void(0);" id = "add">添加子节点</a>

<!--删除按钮-->
<input type="button" id="del" value="删除子节点">
<script>

  //1.获取超链接
  var element_a = document.getElementById("del");

  //2.绑定单击事件
  element_a.onclick = function(){
    //获取div1盒子
    var div1 = document.getElementById("div1");

    //获取div2盒子
    var div2 = document.getElementById("div2");

    //删除盒子
    div1.removeChild(div2);
  }

  //1.获取超链接
  var element_add = document.getElementById("add");

  //2.绑定单击事件
  element_add.onclick = function() {

    //获取div1的盒子
    var div1 = document.getElementById("div1");
    //给div1添加子节点

    //创建div节点
    var div3 = document.createElement("div");
    div3.setAttribute("id","div3");

    //添加盒子
    div1.appendChild(div3);
  }


  /*
      超链接功能：
          1.可以被点击：样式
          2.点击后跳转到href指定的url

      需求：保留1功能，去掉2功能
      实现：href="javascript:void(0);"
   */

  //获取div2的盒子
  var div2 = document.getElementById("div2");

  //返回指定节点的父节点
  var div1 = div2.parentNode;

  //页面弹窗
  alert(div1);

</script>
</body>
</html>