HTML DOM

前言

  • DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。

  • HTML DOM 定义了访问和操作 HTML 文档的标准方法。是把 HTML 里面的各种数据当作对象进行操作的一种思路。

  • HTML DOM 以树结构表达 HTML 文档。

  • HTML DOM 教程

  • HTML DOM 快速入门

  • HTML/CSS/JS 在线工具

1、节点概念

  • DOM 把所有的 HTML 都转换为节点

    • 整个文档 是一个节点
    • 元素 是节点
    • 元素属性 是节点
    • 元素内容 是节点
    • 注释 也是节点

2、获取节点

  • 获取节点:JavaScript 是解释语言,是顺序执行的,对节点的获取要放在 HTML 标签加载后。
关键字 简介 示例代码
document 文档节点
getElementById 通过 id 获取元素节点 var div1 = document.getElementById("d1");
getElementsByTagName 通过标签名称获取元素节点 var divs = document.getElementsByTagName("div");
getElementsByClassName 通过类名获取元素节点 var elements = document.getElementsByClassName("d");
getElementsByName 通过表单元素的 name 获取元素节点 var elements = document.getElementsByName("userName");
attributes 获取属性节点。
nodeName 和 nodeValue 表示一个节点的名称和值
var as = div1.attributes;
as[i].nodeName;
as[i].nodeValue;
childNodes 获取内容节点。获取所有的子节点,其中第一个子节点,就是其内容节点 var content = div1.childNodes[0];
content.nodeName;
content.nodeValue;

3、节点的属性

  • 节点的属性
关键字 简介 示例代码
nodeName 节点名称 document.nodeName; // #document
div1.attributes[0].nodeName; // id
nodeValue 节点值 document.nodeValue; // null
div1.attributes[0].nodeValue; // d1
nodeType 节点类型
元素:1
属性:2
文本:3
注释:8
文档:9
document.nodeType; // 9
div1.attributes[0].nodeType; // 2
innerHTML 元素的文本内容 document.getElementById("d1").childNodes[0].nodeValue = "通过 childNode[0].value 改变内容";
document.getElementById("d1").innerHTML = "通过 innerHTML 改变内容";
id
value
className
元素上的属性。
元素上的属性,可以通过 . 直接访问。
如果是自定义属性,那可以通过如下两种方式来获取。
       getAttribute("test")
       attributes["test"].nodeValue
var input1 = document.getElementById("input1");
input1.id;
input1.value;
input1.className;

4、样式

  • 一个元素节点的 style 属性即对应的 css。

    1
    2
    3
    4
    var d = document.getElementById("d");

    d.style.display = "none";
    d.style.backgroundColor = "green";

5、事件

  • DOM 的事件有很多,下表把工作中常用的事件列出来。
关键字 简介 示例代码
onfocus
onblur
焦点事件。
当组件获取焦点的时候,会触发 onfocus 事件。
当组件失去焦点的时候,会触发 onblur 事件。
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
鼠标事件。
当在组件上鼠标按下的时候,会触发 onmousedown 事件。
当在组件上鼠标弹起的时候,会触发 onmouseup 事件。
当在组件上鼠标经过的时候,会触发 onmousemove 事件。
当在组件上鼠标进入的时候,会触发 onmouseover 事件。
当在组件上鼠标退出的时候,会触发 onmouseout 事件。
onkeydown
onkeypress
onkeyup
键盘事件。
当在组件上键盘按下的时候,会触发 onkeydown 事件。
当在组件上键盘按下的时候,也会触发 onkeypress 事件,只能获取字符键。
当在组件上键盘弹起的时候,会触发 onkeyup 事件。
onclick
ondblclick
点击事件。
当在组件上单击的时候,会触发 onclick 事件。
当在组件上双击的时候,会触发 ondblclick 事件。
onchange 变化事件。
当组件的值发生变化的时候,会触发 onchange 事件。
onsubmit 提交事件。
当 form 元素 @ 提交的时候,会触发 onsubmit 事件。
<form action="/study/login.jsp" onsubmit="login()">
onload 加载事件。
当整个文档加载成功,或者一个图片加载成功,会触发加载事件。
this 当前组件。
表示触发事件的组件,可以在调用函数的时候,作为参数传进去。
<input type="button" onclick="singleClick(this)" value="演示 this 的按钮 1" >
function singleClick(button) { }
return false 阻止事件的发生
  • 阻止事件的发生

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <form method="post" action="/study/login.jsp" onsubmit="return login()">
    账号:<input id="name" type="text" name="name"> <br />
    密码:<input type="password" name="password"> <br />
    <input type="submit" value="登录">
    </form>

    <script>
    function login() {
    var name = document.getElementById("name");
    if (name.value.length == 0) {
    alert("用户名不能为空");
    return false;
    }
    return true;
    }
    </script>

6、节点关系

  • 节点关系
关键字 简介 示例代码
parentNode 父节点关系 node.parentNode;
previousSibling
nextSibling
同胞节点关系 d2.previousSibling;
childNodes 子节点关系。
firstChild 第一个子节点。
lastChild 最后一个子节点。
childNodes 所有子节点。
div.childNodes;
  • childNodeschildren 都可以获取一个元素节点的子节点。

    • childNodes 会包含文本节点
    • children 会排除文本节点

7、创建节点

  • 创建节点
关键字 简介 示例代码
createElement 创建元素节点 var hr = document.createElement("hr");
createTextNode 创建文本节点 var text = document.createTextNode("这是通过 DOM 创建出来的 <p>");
createAttribute 创建属性节点 var href = document.createAttribute("href");
href.nodeValue="http://12306.com";
a.setAttributeNode(href);

8、删除节点

  • 删除节点
关键字 简介 示例代码
removeChild 删除元素节点 parentDiv.removeChild(div2);
removeAttribute 删除属性节点 link.removeAttribute("href");
removeChild 删除文本节点 var textNode = parentDiv.childNodes[0];
parentDiv.removeChild(textNode);

9、替换节点

  • 替换节点
关键字 简介 示例代码
replaceChild 替换节点 parentDiv.replaceChild(d4, d3);

10、插入节点

  • 插入节点
关键字 简介 示例代码
appendChild 追加节点 parentDiv.appendChild(d4);
insertBefore 在前方插入节点 parentDiv.insertBefore(d25, d3);

11、常用场景

12、表格排序

文章目录
  1. 1. 前言
  2. 2. 1、节点概念
  3. 3. 2、获取节点
  4. 4. 3、节点的属性
  5. 5. 4、样式
  6. 6. 5、事件
  7. 7. 6、节点关系
  8. 8. 7、创建节点
  9. 9. 8、删除节点
  10. 10. 9、替换节点
  11. 11. 10、插入节点
  12. 12. 11、常用场景
  13. 13. 12、表格排序
隐藏目录