4.1 DOM
1.基本概念
- 文档对象模型(Document Object Mordel,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口
- 它是一种与平台和语言无关的应用程序接口,可以动态的访问程序和脚本,更新其内容、结构、和文档的风格
2.DOM又称为文档树模型
- 图示:
- 概念:
文档:一个网页可以称为文档
节点:网页中的所有内容都是节点(标签、文本、属性、注释等)
元素:网页中的标签
属性:标签的属性 - DOM常用操作:
- 获取文档元素
- 对文档元素进行增删查改操作
- 事件操作
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.节点之间关系
-
获取父节点:parentNode
案例 :通过子盒子设置父盒子的背景色var btn = document.getElementsByClassName("btn")[0]; btn.onclick = function () { var span = document.getElementById("span"); var box = span.parentNode; box.style.backgroundColor = "red"; };
-
上一个兄弟节点
var previous = span.previousElementSibling || span.previousSibling;
-
下一个兄弟节点
var next = span.nextElementSibling || span.nextSibling;
-
获取标签中第一个子节点
box.firstElementChild || box.firstChild
-
获取标签中最后一个子节点
box.lastElementChild || box.lastChild
-
获取所有元素节点: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); }
-
获取任意兄弟节点
var mt = document.getElementsByClassName("mt")[0]; console.log(mt.parentNode.children[1]);
8.节点操作
- 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);
- 节点属性(节点.属性)
- 获取:getAttribute(名称)
- 设置:setAttribute(名称, 值)
- 删除:removeAttribute(名称)