文档对象模型DOM

棉花糖老丫

于 2024-04-26 11:00:00 发布

阅读量632

点赞数 18

分类专栏：前端文章标签： javascript 前端 dom html

本文链接：https://blog.csdn.net/qq_35701567/article/details/138015758

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、DOM

1.1 DOM简介

全称Document Object Model，即文档对象模型。

DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，

而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，

组建好之后，按照树的结构将页面显示在浏览器的窗口中。

1.2 节点层次

HTML网页是可以看做是一个树状的结构，如下：

html

|-- head

| |-- meta

| |-- title

| ...

|-- body

| |-- div

| |-- form

| | |-- input

| | |-- textarea

... ... ...

这是一棵树，是由多个节点（Node）组成的，节点的类型有很多种。

节点最多有一个父节点，可以有多个子节点。

HTML DOM 定义了访问和操作HTML文档的标准方法。

document就代表当前页面的整个文档树。如何获取document?

通过window.document

1.3 document对象的集合

集合

all

forms

images

links

属性body

//all[] 提供对文档中所有 HTML 元素的访问。

var doms = window.document.all;

alert(doms.length);

//forms[] 返回对文档中所有 Form 对象引用。

var forms = window.document.forms;

alert(forms.length);

alert(forms[0]);

//通过from的name直接获取

alert(forms["one"]);

//images[] 返回对文档中所有 Image 对象引用。

var images = window.document.images;

alert(images.length);

//links[] 返回对文档中所有 Area 和 Link 对象引用。

var links = window.document.links;

alert(links.length);

//属性,body 提供对 <body> 元素的直接访问。

var body = window.document.body;

alert(body);

页面:

<html>

<head>

<title>New Web Project</title>

</head>

<body>

</form>

</body>

</html>

1.4 document对象的方法

访问方法(最常用的DOM方法)

获取节点

document.getElementById(sId)

返回对拥有指定 id 的第一个对象的引用。

document.getElementsByName(sName)

返回带有指定名称的对象集合。

document.getElementsByTagName(sTagName)

返回带有指定标签名的对象集合。

获取属性

getAttribute(sAttrName)返回属性值

设置属性

setAttribute("属性名", "属性值");

1.5 获取节点对象案例

document.getElementById("html元素的id")

document.getElementsByTagName("标签名")

document.getElementsByName("html元素的name")

示例：

1，得到所有的input元素并显示信息（value）。

2，得到所有标签id为"username"的结果。获取旧value值并设置value值

3. 获取所有标签name 为like的元素.获取value值.

//1，得到所有的input元素并显示信息（value）。

var inputs = document.getElementsByTagName("input");

alert(inputs.length);

for (var i = 0; i < inputs.length; i++) {

alert(inputs[i].value);

}

//2，得到id为"username"的元素。写入新值

var username = document.getElementById("username");

//旧值

alert(username.value);

//新值

username.value = "jack";

//3. 获取所有标签name 为like的元素.

var likes = document.getElementsByName("like");

alert(likes.length);

for (var i = 0; i < likes.length; i++) {

alert(likes[i].value);

}

<body>

吃

睡

玩

</form>

</body>

1.5.1 属性操作练习

1，写一个form，其中有多个checkbox。

2，获取所有选中的数量。

3，实现全选与全不选的效果。

function clickAll() {

var likes = document.getElementsByName("like");

var allLike = document.getElementsByName("allLike")[0];

for (var i = 0; i < likes.length; i++) {

if (allLike.checked) {

likes[i].checked = true;

} else {

likes[i].checked = false;

}

function getLikes() {

var likes = document.getElementsByName("like");

//获取选中的个数

var count = 0;

for (var i = 0; i < likes.length; i++) {

if (likes[i].checked) {

count++;

}

alert(count);

}

1.6 查找节点

从一个节点出发开始查找：

parentNode 获取当前元素的父节点。

childNodes 获取当前元素的所有下一级子元素。

firstChild 获取当前节点的第一个子节点。

lastChild 获取当前节点的最后一个子节点。

nextSibling 获取当前节点的下一个节点。（兄节点）

previousSibling 获取当前节点的上一个节点。（弟节点）

<body>

<br/>

</form>

</body>

var name = document.getElementById("username");

//parentNode 获取当前元素的父节点。

var parent = name.parentNode;

alert(parent.nodeName);

//form

//childNodes

var form = document.getElementById("form");

var child = form.childNodes;

alert(child.length);

for (var i = 0; i < child.length; i++) {

alert(child[i].nodeName);

}

//firstChild

var firstChild = form.firstChild;

alert(firstChild.nodeName);

//lastChild

var lastChild = form.lastChild;

alert(lastChild.nodeName);

//nextSibling

var nextSibling = form.nextSibling;

alert(nextSibling.nodeName);

//previousSibling

var previous = form.previousSibling;

alert(previous.nodeName);

示例1：

firstChild属性最普遍的用法是访问某个元素的文本：

var text=x.firstChild.nodeValue;

示例2：

parentNode 属性常被用来改变文档的结构。

假设您希望从文档中删除带有 id 为 "maindiv" 的节点：

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

1.7 节点操作

1.7.1 创建新节点

document.createElement("标签名") 创建新元素节点

document.createTextNode("文本内容") 创建新文本节点

1.7.2 设置新节点

elt.setAttribute("属性名", "属性值") 设置属性

1.7.3 把新节点放到指定位置

elt.appendChild(e) 添加元素到elt中最后的位置

elt.insertBefore(new, child); 添加到elt中，child之前。

// 参数1：要插入的节点参数2：插入目标元素的位置

1.7.4 移除某个节点

elt.removeChild(eChild) 删除指定的子节点

示例：

//document.createElement("标签名") 创建新元素节点

//document.createTextNode("文本内容") 创建新文本节点

var name = document.createElement("input");

var text = document.createTextNode("姓名:");

//setAttribute("属性名", "属性值") 设置属性

name.setAttribute("name", "username");

name.setAttribute("type", "text");

name.setAttribute("id", "username");

name.setAttribute("value", "输入用户名");

//appendChild(e)

document.body.appendChild(text);

document.body.appendChild(name);

var br = document.createElement("br");

//insertBefore(new, child)

document.body.insertBefore(br, name);

//removeChild(eChild)

function remove() {

document.body.removeChild(br);

}

window.setTimeout(remove, 1000);

1.8 改变HTML中元素的CSS样式：

element.style.样式名 = 值

例如：

myDiv.style.color = "red"; // 对应color样式

myDiv.style.backgroundColor = "blue"; // 对应background-color

2、事件

2.1 事件说明

基本上所有的HTML元素中都可以指定事件属性。

每个元素支持什么样事件应查询文档。

所有的事件属性都是以on开头，后面的是事件的触发方式，如：

onclick，表示单击

onkeydown，表示键按下

...

2.2 绑定事件处理

代码

在元素中写相应的事件属性，其值指定为一段JS代码。

例：

2.3 常用的事件类型

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发。

ondblclick 当用户双击对象时触发。

onmousedown 当用户用任何鼠标按钮单击对象时触发。

onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseover 当用户将鼠标指针移动到对象内时触发。

onmouseout 当用户将鼠标指针移出对象边界时触发。

onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

onblur 在对象失去输入焦点时触发。

onfocus 当对象获得焦点时触发。

按键相关的：

onkeydown 当用户按下键盘按键时触发。

onkeyup 当用户释放键盘按键时触发。

onkeypress 当用户按下字面键时触发。

其他：

onchange 当对象或选中区的内容改变时触发。

onload 在浏览器完成对象的装载后立即触发。

onsubmit 当表单将要被提交时触发。

2.4 事件处理函数

function keyDown(){

...

}

document.onkeydown = keyDown;

// 当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫KeyDown()函数。

在DOM 中绑定事件

var inp = document.createElement("input");

//设置属性

inp.setAttribute("type", "button");

inp.setAttribute("value", "单击");

//input 绑定事件

inp.onclick = function() {

alert("单击1");

}

inp.onclick = click2;

//添加到body中

document.body.appendChild(inp);

3、window对象

1).属性

name 窗体的名字

2).集合

frames 获取到一个数组, 其中每一个元素是窗体中的一个frame

3).事件

onload 窗体加载之后

onscroll 窗体滚动

onresize 窗体改变大小

4).方法

alert() 弹出对话框

confirm() 弹出确认对话框, 如果点确定返回true, 点取消返回false

prompt() 弹出输入对话框, 可以传入提示信息和默认值, 返回用户输入的内容

setInterval() 每经过一段时间执行一次方法

setTimeout() 经过一段时间之后执行一次方法(仅一次)

clearInterval() 清除之前的setInterval(), 需要指定id

clearTimeout() 清除之前的setTimeOut(), 需要指定id

close() 关闭当前窗口, ie8会提示, ie6没有

open() 打开新窗口, 有4个参数

参数1, 地址

参数2, 在制定窗口打开, 如果不存在指定窗口, 则在新窗口打开并将新窗口命名

参数3, 窗口的样式

参数4, 如果在当前窗口打开时, 新地址是否替换浏览器历史中的当前地址

5）.location对象

location.href="http://www.sina.com" 控制当前页面跳转到指定地址

6）.history对象

back() 后退

forward() 前进

7).document对象

a).属性

bgColor 背景颜色

b).集合

imgs 获取所有img标签

links 获取所有包含href属性的a标签

forms 获取所有form标签

scripts 获取所有script标签

8).element

文档中除了第一行Comment之外其他的html标签都是element

9).node

包括document在内, 所有html文档中的对象都是node

棉花糖老丫

关注

18
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
0
评论
文档对象模型DOM

全称Document Object Model，即文档对象模型。DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。
复制链接

扫一扫