javascript总结31 :DOM概述
2024-08-27 06:48:21
1 JavaScript 三个组成部分
核心(ECMAScript)欧洲计算机制造商协会 描述了JS的语法和基本对象。
文档对象模型(DOM) 处理网页内容的方法和接口
浏览器对象模型(BOM) 与浏览器交互的方法和接口
2 DOM (文档对象模型)
DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。
目的其实就是为了能让js操作html元素而制定的一个规范。
3 DOM 树
4 节点(Node)
由结构图中我们可以看到,整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。
标签中的文字则是文字节点。
标签的属性是属性节点。
一切都是节点……
5 获取节点
-操作节点,必须首先找到该元素。有三种方法来做这件事:
通过 id 找到 HTML 元素 document.getElementById("demo");
通过标签名找到 HTML 元素 document.getElementsByTagName("div")
通过类名找到 HTML 元素 document.getElementsByClassName("a");
通过类名查找 HTML 元素在 IE 5,6,7,8 中无效
6 DOM 访问关系
DOM的节点并不是孤立的,因此可以通过DOM节点之间的相对关系对它们进行访问.
父兄访问节点方法:
父节点 parentNode
兄弟节点 nextSibling nextElementSibling previousSibling previousElementSibling
子节点 firstChild firstElementChild lastChild lastElementChild
所有子节点 childNodes children
代码实例:
1.box1是box的父节点
var box2 = document.getElementsByClassName("box2")[0];
var box2 = document.getElementById("box2")
console.log(box2.parentNode); //2.nextElementSibling下一个兄弟节点
console.log(box2.nextElementSibling); //firstElementChild第一个子节点
console.log(box2.parentNode.firstElementChild); //所有子节点
console.log(box2.parentNode.childNodes);
console.log(box2.parentNode.children);
最新文章
- mysql存储过程编写-入门案例-遁地龙卷风
- AngularJS中的JSONP实践
- python知识点总结
- msys2安装
- Ubuntu无法识别显示器情况下,高分辨率的设置
- Java 线程并发策略
- Andriod中绘(画)图----Canvas的使用详解
- XTUOJ 1252 Defense Tower 贪心
- struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
- android之调用webservice 实现图片上传
- ECSTORE2.0 新增自定义定时任务
- 怎样通过css的media属性,适配不同分辨率的终端设备?
- javaweb浏览器随机输出一张验证码图片
- 【单调栈】最长不上升子序列变式,洛谷 P2757 导弹的召唤
- python之动态参数 *args,**kwargs和命名空间
- Fiddler抓包使用教程-乱码处理 Decode
- MySQL--修改MySQL账号密码
- ref:详解MYSQL数据库密码的加密方式及破解方法
- MyLocationService
- grunt 不是内部或外部命令,也不是可运行的程序或批处理文件
热门文章
- localhost不能访问127.0.0.1可以访问的原因及解决方法 被打磨的不像人样
- 一个简单的Java Web项目搭建流程
- 十三 Thread的一些常用方法
- line 1: syntax error: unexpected word (expecting ")")
- 关于标签的属性-<;a>;
- js中Number()、parseInt()和parseFloat()的区别
- Spring AOP详解及简单应用
- Android中RelativeLayout各个属性
- oracle对表常用的操作
- 利用maven实现差异化配置