javascript总结之DOM

最新推荐文章于 2025-08-22 23:25:37 发布

原创最新推荐文章于 2025-08-22 23:25:37 发布 · 313 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了DOM（Document Object Model）的概念及其在网页中的应用，包括如何使用JavaScript操作HTML元素、属性和样式，以及如何响应和触发各种事件。

DOM

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树

HTML DOM Tree

在这里插入图片描述
DOM标准规定HTML文档中的每个成分都是一个节点(node)：

文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找标签

直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集
简介查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素

节点操作

创建节点
document.createElement(tagName)
var divEle = document.createElement("div")
添加节点

var divEle = document.createElement("div");
var div2Ele = document.createElement("div");

// appendChild() 追加一个节点
divEle.appendChild(div2Ele)
// 追加一个节点并放在某个节点的前面
divEle.appendChild(div2Ele, 某个节点)

删除节点
通过父元素调用来删除
divEle.removeChild(eleName)
替换节点
divEle.replaceChild(eleName, 某个节点)
属性节点

var divEle = document.getElementById('nav');
divEle.innerText // 获取节点的文本值
divEle.innerHTML // 获取节点的html标签
divEle.innerText = 'this is tag' // 设置节点的文本值
divEle.innerHTML = "<h1> Title </h1>" // 设置节点的html标签

属性操作

var divEle = document.getElementById('nav');
divEle.setAttribute("age", "18") // 给节点设置属性和值
divEle.getAttribute("age") // 获取节点和值
divEle.removeAttribute("age") // 删除节点
// 自带的属性可以直接.属性名来获取和设置

** .value获取值**
elementNode.value
只适用于一下几个标签
input select textarea
** class的操作**

className  // 获取所有样式类名(字符串)
classList.remove(cls)  // 删除指定类
classList.add(cls)  // 添加类
classList.contains(cls)  // 存在返回true，否则返回false
classList.toggle(cls)  // 存在就删除，否则添加

指定css操作

// 中间没有横线的直接.属性名
obj.style.margin
obj.style.width
obj.style.height
// 中间有横线的，去除横向，第二个单词首字母大写
obj.style.borderLeft
obj.style.backgroundImage
obj.style.fontFamily

事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。
常用事件

// 鼠标单击事件
onClick // 单击事件 用户点击某个标签时触发
ondblclick // 双击事件 用户双击某个标签时触发
// 输入框事件
onfocus  // 输入框获得焦点时触发
onblur // 输入框失去焦点时触发
onchange // 输入框内容被改变时触发
// 键盘事件
onkeydown // 某键被按下触发
onkeypress // 某键被按下并松开触发
onkeyup // 某键被松开触发
// 鼠标移动事件
onmousedown // 鼠标按钮被按下触发
onmousemove // 鼠标移动时触发
onmouseout  // 鼠标离开某个元素触发
onmouseover // 鼠标移动到某个元素触发

onselect // 文本框中的文本被选中时触发
onsumbit // 确认按钮被点击时触发

绑定事件
方式一：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>
<!-- this是实参，表示触发事件的当前元素。 -->

方式二：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

定时器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
    var t;
    function showTime() {
        var i1Ele = document.getElementById('i1');
        var time = new Date();
        i1Ele.value = time.toLocaleString();
    }
    showTime();
    var b1Ele = document.getElementById('b1');
    b1Ele.onclick = function (ev) {
        if (!t){
            t = setInterval(showTime,1000)
        }
    };
    var b2Ele = document.getElementById('b2');
    b2Ele.onclick = function (ev) {
       clearInterval(t);
       t = undefined
    };
</script>
</body>
</html>

搜索框案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>
</head>
<body>
    <input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="请输入关键字"){
        inputEle.value="";
    }
}
function blur(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="请输入关键字";
    }
}
</script>
</body>
</html>

select联动：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>select联动</title>
</head>
<body>
<select id="province">
  <option>请选择省:</option>
</select>
<select id="city">
  <option>请选择市:</option>
</select>
<script>
  data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
  var p = document.getElementById("province");
  var c = document.getElementById("city");
  for (var i in data) {
    var optionP = document.createElement("option");
    optionP.innerHTML = i;
    p.appendChild(optionP);
  }
  p.onchange = function () {
    var pro = (this.options[this.selectedIndex]).innerHTML;
    var citys = data[pro];
    // 清空option
    c.innerHTML = "";
    for (var i=0;i<citys.length;i++) {
      var option_city = document.createElement("option");
      option_city.innerHTML = citys[i];
      c.appendChild(option_city);
    }
  }
</script>
</body>
</html>

window.onload
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。