DOM介绍
文章目录
- 一、DOM简介
- 1.什么是DOM
- 2.DOM树
- 二、获取元素
- 1.如何获取页面元素
- 2.根据ID获取
- 3.根据标签名获取
- 4.通过HTML5新增的方法获取
- 5.获取特殊元素(body,html)
- (1)获取boby元素
- (2)获取html元素
一、DOM简介
1.什么是DOM
文档对象模型(Document Object Model,简称DOM
),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
2.DOM树
- 文档:一个页面就是一个文档,DOM中使用document表示
- 元素:页面中的所有标签都是元素,DOM中使用element表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看作是对象。
二、获取元素
1.如何获取页面元素
DOM在实际开发中主要用来操作元素。
如何获取页面中的元素呢?
获取页面中元素可以使用以下几种方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方式获取
- 特殊元素获取
2.根据ID获取
使用getElementById()方法可以获取带有ID的元素对象。
示例
<body>
<div id="time">2022-5-30</div>
<script>
// 1.因为我们文档页面从上往下加载,所以先得有标签,所以script写到标签的下面
// 2.get 获取 element 元素 by 通过 驼峰命名法
// 3.参数 id是大小写敏感的字符串
// 4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 5.console.dir 打印我们返回的元素对象,更好的查看里面的属性和方法
console.dir(timer);
</script>
</body>
3.根据标签名获取
使用getElementsByTagName()可以返回带有指定标签名的对象的集合
。
document.getElementsByTagName('标签名');
注意:
- 因为得到的是一个对象的集合,所以我能想要操作里面的元素就需要遍历。
- 得到元素对象是动态的。
还可以获取某个元素(父元素)内部所有指定标签名的子元素。
element.getElementsByTagName('标签名');
注意:
- 父元素必须是单个对象(必须知名是哪一个元素对象)。获取的时候不包括父元素自己。
<ul>
<li>高等数学1</li>
<li>高等数学2</li>
<li>高等数学3</li>
<li>高等数学4</li>
<li>高等数学5</li>
</ul>
<ol id="ol">
<li>生僻字1</li>
<li>生僻字2</li>
<li>生僻字3</li>
<li>生僻字4</li>
<li>生僻字5</li>
</ol>
<script>
// 1.返回的是 获取过来元素对象的集合,以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2.我们想要一次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3.如果页面中只有一个li,返回的还是伪数组的形式
// 4.如果页面中没有这个元素返回的空的伪数组的形式
// 5.element.getElementsByTagName('标签名');
// var ol = document.getElementsByTagName('ol'); //ol
// // console.log(ol.getElementsByTagName('li'));
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
4.通过HTML5新增的方法获取
1.document.getElementsByClassName('类名');//根据类名返回元素对象集合
2.document.querySelector('选择器');//根据指定选择器返回第一个元素对象
3.document.querySelectorAll('选择器');//根据指定选择器返回
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1.getElementsByClassName根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2.querySelector返回指定选择器的第一个元素对象,切记:里面的选择器需要加符号,类选择器.box id选择器#nav 标签不加符号
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3.querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
5.获取特殊元素(body,html)
(1)获取boby元素
document.body //返回body元素对象
(2)获取html元素
document.documentElement//返回html元素对象
<script>
// 1.获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.获取html元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
qq_53971802: 想要完整站点!!
Jun zhao.: 明白了大佬
王祎0825: 是看你一个页面分几个大模块,整体看上去要和谐,之后你在细分15或者20或者更多或者更少
Jun zhao.: 请教下,为什么要把屏幕划分为15份,划分的标准虽然不一样但是这个是根据什么来的,不光320,375,都要除以15吗,还是根据屏幕宽度在决定除以15还是除以20
m0_67956389: 你好 可以分享一下图片素材吗