JavaScript快速入门三

DOM

• Document Object Model ，文档对象模型，将标记语言文档的各个组成部分，封装成为对象（简单来说：就是将HTML页面中的每个元素封装成为对象）

  • 使用这些对象，对标记语言进行 动态操作

• 功能：控制 HTML 文档的内容

  

• 获取页面标签(元素)对象：Element

  // 通过元素 id 获取HTML元素对象
  document.getElementById("id值");
  // 通过 标签名 获取HTML元素对象
  document.getElementByName("标签名");
  // 通过 类名 获取HTML元素对象
  document.getElementByClassName("类名");
  

控制HTML文档

改变HTML内容

• 语法

  document.getElementById(id).innerHTML = "新内容";
  

• 示例代码

  <p id="p1">你好，小哼！</p>
  <h1 id="header">旧标题</h1>
  <script>
      document.getElementById("p1").innerHTML = "你好，中国！";
      document.getElementById("header").innerHTML = "新标题";
  </script>
  

  注意：使用 innerHTML 改变此元素的内容

改变HTML属性

• 语法

  document.getElementById(id).attribute = "新属性值";
  

• 示例代码

  <a id="a1" href="https://www.baidu.com">CSS选择器</a>
  <script>
      document.getElementById("a1").href="https://blog.youkuaiyun.com/weixin_45754463/article/details/135714761";
  </script>
  

  注意：得到此标签元素对象后，调用要修改的属性，修改即可

改变HTML样式

• 语法

  document.getElementById(id).style.property = "新样式";
  

• 示例代码

  <p id="p1">小哼快跑！</p>
  <script>
      document.getElementById("p1").style.color = "orange";
      document.getElementById("p1").style.fontSize = "80px";
  </script>
  

核心DOM模型

Document(文档对象)

• 创建语法

  // 格式一
  window.document
  // 格式二
  document
  

• 常见方法

  方法	作用
  getElementById(String id)	根据 id 属性获取元素对象，id 唯一
  getElementsByName(String name)	根据 name 属性值获取元素对象们，返回值是一个数组
  getElementsByClassName(String className)	根据 class 属性值获取元素对象们，返回值是一个数组
  getElementsByTagName(String tagName)	根据 标签名 获取元素对象们，返回值是一个数组
  createAttribute(String name)	创建一个新的属性节点，并指定属性的名称
  createComment(String name)	创建一个新的注释节点
  createElement(String name)	创建一个新的元素节点
  createTextNode(String name)	创建一个新的文本节点

• 示例代码

  /* 获取Element对象 */
  let a = document.getElementById("p1");
  let b = document.getElementsByTagName("p");
  let c = document.getElementsByClassName("btn");
  let d = document.getElementsByName("button");
  

Element(元素对象)

• 获取元素对象，通过 document 来获取

• 方法

  方法	作用
  removeAttribute(String attribute)	删除属性
  setAttribute(String attribute , String content)	设置属性

• 示例代码

  <a>点我试试</a>
  <input type="button" value="给a添加属性" id="add_btn">
  <input type="button" value="给a删除属性" id="remove_btn">
  <script>
      var add_btn = document.getElementById("add_btn");
      var remove_btn = document.getElementById("remove_btn");
      var element_a = document.getElementsByTagName("a")[0];
      // 点击函数
      add_btn.onclick = function (){
          element_a.setAttribute("href","https://www.baidu.com");
      }
      remove_btn.onclick = function (){
          element_a.removeAttribute("href");
      }
  </script>
  

Node(节点对象)

• 概述：所有 DOM 对象都可以被认为是一个节点

• 属性

  • parentNode：返回节点的父节点

• 注意

  • href = “javascript:void(0)” ，含义：阻止返回，可以点击，但是不会跳转

• 方法

  方法	作用
  appendChild()	向节点的子节点列表结尾添加新的子节点
  removeChild()	删除(并返回)当前节点的指定子节点
  replaceChild()	用新节点替换一个子节点

• 示例代码

  <script>
      // 创建一个新的根节点，指名为 book
      var rootElement = document.createElement("book");
      var attr = document.createAttribute("id");
      attr.setValue("001");
      rootElement.appendChild(attr);
      // 向 DOM 树下添加子节点
      document.appendChild(rootElement);
      document.removeChild(rootElement);
      document.replaceChild(attr,rootElement);
  </script>