Web前端基础(6)浏览器对象模型DOM

JavaScript组成

JavaScript由三部分组成

  1. ECMAscript – 欧洲计算机制造商协会,描述了javascript的语法和基本对象。
  2. DOM – 文档对象模型,处理网页内容的方法和接口。
  3. BOM – 浏览器对象模型,与浏览器交互的方法和接口。

DOM的定义

DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构,目的其实就是为了能让javascript操作html元素而定制的一个规范。

DOM树如下

由结构图中我们可以看到,整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。

访问DOM节点的方法

  1. getElementById():通过id访问DOM节点
1
2
3
4
5
6
7
8
9
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
//将上面的"Hello WOrld!"的文本改为"New text"
</script>
</body>
</html>
  1. getElementsByTagName():通过标签名称访问DOM节点(结果是集合)
  2. getElementsByClassName():通过class类名访问DOM节点(有兼容性问题)

我们可以封装自己的class类来解决兼容性问题:取出所有盒子,利用遍历的方法找出className.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function(){
//封装自己class类名
function getClass(classname){
//如果浏览器支持,则直接返回
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
// 不支持的 浏览器
var arr = []; // 用于存放满足的数组
var dom = document.getElementsByTagName("*");
//alert(dom.length);
for(var i=0;i<dom.length;i++)
{
if(dom[i].className == classname)
{
arr.push(dom[i]);
}
}
return arr;
}
console.log(getClass("demo").length);
}

DOM节点的访问关系

节点的访问关系,是以属性的方式存在的。DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问。

父节点

parentNode:调用者就是节点。一个节点只有一个父节点。调用方式就是节点.parentNode.

1
2
3
4
5
6
7
window.onload = function(){
var x = document.getElementById("x");
x.onclick = function(){
this.parentNode.style.display = "none";
// 关掉的是他的父亲节点
}
}

兄弟节点

  • nextSibling:下一个节点(包括空文档和换行节点)。(注:IE678中指下一个元素节点(标签))
  • nextElementSibling:下一个元素节点。
  • previousSibling:前一个节点(包括空文档和换行节点)。(IE678中指前一个元素节点(标签))
  • previousElementSibling:前一个元素节点。

单个子节点

  • firstChild:调用者是父节点。第一个子节点(包括空文档和换行节点)。(IE678中指第一个子元素节点(标签))
  • firstElementChild:在火狐谷歌IE9都指的第一个元素节点。
  • lastChild:调用者是父节点。最后一个子节点(包括空文档和换行节点)。(IE678中指最后一个子元素节点(标签))
  • lastElementChild:最后一个元素节点。

所有子节点

  • childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。
    nodeType == 1 表示的是元素节点,元素就是标签
    nodeType == 2 表示是属性节点
    nodeType == 3 是文本节点

  • children:非标准属性,它返回指定元素的子元素集合。但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和innerHTML方法一样,得到了几乎所有浏览器的支持。

平常我们需要获取的只是元素节点,所以可以用children, children只获取元素节点,而且没有兼容性问题,但是在IE678中会包含注释节点,所以使用前要避免写注释。(通常使用children)

DOM节点的操作

创建节点

1
var div = document.creatElement(“li”);

插入节点

appendChild():后面追加节点
insertBefore(插入的节点, 参照节点):放到参照节点的前面,如果参照节点为null,默认放到最后。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

删除节点

1
2
3
4
5
6
7
8
9
10
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

替换节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

克隆节点

cloneNode() 括号里面可以跟参数,如果是true深层复制,除了复制盒子本身外还复制子节点,如果为false只复制本节点。

设置节点属性

获取节点属性 getAttribute

1
alert(demo.getAttribute("title"));

设置节点属性 setAttribute(“属性”, “值”)

1
2
3
div.setAttribute(“class”,”demo”);

document.getElementById("p2").style.color = "blue";

删除某个属性 removeAttribute(“属性”)

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出响应。

onclick事件

1
<h1 onclick="this.innerHTML='hello!'">请点击这段文本!</h1>

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

1
<body onload="checkCookies()">

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

1
2
3
4
5
6
7
8
<script>
function upperCase(){
var x = document.getElementById("testfname");
x.value = x.value.toUpperCase();
}
</script>

<input type="text" id="testfname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

onmousedown、onmouseup事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}

function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script>

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×