JavaScript学习笔记（十）【DOM】

4.1 DOM

1.基本概念

• 文档对象模型（Document Object Mordel，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口
• 它是一种与平台和语言无关的应用程序接口，可以动态的访问程序和脚本，更新其内容、结构、和文档的风格

2.DOM又称为文档树模型

• 图示：
  
• 概念：
  文档：一个网页可以称为文档
  节点：网页中的所有内容都是节点（标签、文本、属性、注释等）
  元素：网页中的标签
  属性：标签的属性
• DOM常用操作：

1. 获取文档元素
2. 对文档元素进行增删查改操作
3. 事件操作

3.window和document

• window
  • 所有的浏览器都支持window对象，它支持浏览器窗口
  • 所有的js全局对象，函数以及变量都能自动成为window对象的成员
  • 全局变量是window对象的属性，全局函数是window对象的方法
• document
  • document也是window对象的属性之一
  • document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
  • 常用属性
    console.log(document);
    console.log(document.childNodes);
    console.log(document.head);
    console.log(document.body);
    document.title = “测试”;console.log(document.title);

4.事件

• 用户和浏览器之间的交互行为, 比如：点击按钮，鼠标进入/离开、双击…
• 我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码将会执行
• 比如: 按钮点击
  • 方式一：结构和行为耦合，不方便维护，不推荐使用
    id=“btn” οnmοusemοve=“alert(‘你干嘛摸我?’);”
  • 方式二：为按钮的对应事件绑定处理函数的形式来响应事件
    var btn = document.getElementById(‘btn’);
    btn.onclick = function (ev) {
    alert(‘你再点一下试试?’);
    }

5.文档加载过程

• 存在问题
  浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行, 如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载，会导致在js中无法获取到页面中的DOM对象
  
• 解决方案
  1.onload事件
  onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件, 该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
  2.把script标签放在body尾部
  建议: 两者综合

6.文档页面元素获取

• 根据id获取元素
  var btn1 = document.getElementById(“btn”);
• 根据标签名获取元素
  var btn2 = document.getElementsByTagName(“button”)[0];
• 根据name获取元素
  var btn3 = document.getElementsByName(“btn”)[0];
• 根据类名获取元素
  var btn4 = document.getElementsByClassName(“my-btn”)[0];
• 根据选择器获取元素
  var btn5 = document.querySelector(".my-btn");
  var btn6 = document.querySelectorAll(".my-btn")[0];

7.节点之间关系

1. 获取父节点：parentNode
   案例 ：通过子盒子设置父盒子的背景色

    var btn = document.getElementsByClassName("btn")[0];
    	      btn.onclick = function () {
            var span = document.getElementById("span");
            var box = span.parentNode;
            box.style.backgroundColor = "red";
        };
   

2. 上一个兄弟节点

    var previous = span.previousElementSibling || span.previousSibling;
   

3. 下一个兄弟节点

    var next = span.nextElementSibling || span.nextSibling;
   

4. 获取标签中第一个子节点

    box.firstElementChild || box.firstChild
   

5. 获取标签中最后一个子节点

    box.lastElementChild || box.lastChild
   

6. 获取所有元素节点：nodeType
   每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示
   
   演示

    window.onload = function () {
    // 1. 获取标签
    var box = document.getElementById("box");
    // 2. 获取所有子节点
    var allNodeList = box.childNodes;
    console.log(allNodeList);
    var newList = [];
    for(var i=0; i<allNodeList.length; i++){
        var node = allNodeList[i];
        if(node.nodeType === 1){
           newList.push(node)
        }
    }
    console.log(newList);
    }
   

7. 获取任意兄弟节点

    var mt = document.getElementsByClassName("mt")[0];
    console.log(mt.parentNode.children[1]);
   

8.节点操作

1. CRUD(增删改查)

• 创建节点

    document.createElement("img");
    box.appendChild(img);
    box.insertBefore(img, btn);
  

• 删除节点

    var btn = document.getElementById("btn");
    word.parentNode.removeChild(word); // 自杀
     // btn.remove();
  

• 克隆节点
  语法 ：新节点=要复制的节点.cloneNode(参数) ;

    var box = document.getElementsByClassName("box")[0];
    var newTag = box.cloneNode(true);//深克隆
    // console.log(newTag);
    document.body.appendChild(newTag);
  

2. 节点属性（节点.属性）

• 获取：getAttribute(名称)
• 设置：setAttribute(名称, 值)
• 删除：removeAttribute(名称)