JavaScript 快速入门六

qq_46117056

于 2020-11-04 19:11:56 发布

阅读量202

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46117056/article/details/109496742

版权

JavaScript

DOM
DOM 简介
获取元素

JS 的组成

在这里插入图片描述

JS 基础学习 ECMAScript 基础语法为后面作铺垫， Web APIs 是 JS 的应用，大量使用 JS 基础语法做页面交互效果。

DOM有什么用？

DOM可以改变网页的内容、结构和样式。
在这里插入图片描述

在这里插入图片描述

什么是 DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

DOM 树

在这里插入图片描述

文档：一个页面就是一个文档，DOM 中使用 document 表示

元素：页面中的所有标签都是元素，DOM 中使用 element 表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

用css改变标签样式

要先把这个标签选出来，才能进行操作。

<!DOCTYPE html>
<html>

   <head>
   	<meta charset="utf-8" />
   	<title></title>
   	<style>
   		p{
   			 font-size:20px;
   		}
   		#one{
   			 color:red;
   		}
   		
   		.two{
   			 text-align:center;
   		}
   	</style>
   </head>

   <body>
       <p>学习是个循序渐进的过程</p>
   	<p id="one">上学人</p>
       <p class="two">回家种田吧！</p>
   </body>

</html>

DOM可以改变网页的内容、结构和样式。比如说页面中有个标签。我想改变这个标签的样式。要先获取这个标签，才能操作这个标签。

在dom里面，标签叫做元素。获取标签也就是获取元素。

那怎么获取元素呢？

获取元素

获取页面中的元素可以使用以下几种方式:

根据 ID 获取

根据标签名获取

通过 HTML5 新增的方法获取

特殊元素获取

根据 ID 获取

<body>
	<p id="test">我是段落1</p>
	<p id="test">我是段落2</p>
</body>

当网页一旦加载完成时，浏览器内部会自动创建一个DOM树（二叉树）

DOM对象,也就是说我们可以直接使用document

使用 document对象的getElementById() 方法可以获取带有 ID 的元素对象。

document.getElementById(‘id’); 返回的是对象

使用 console.dir(obj) 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<body>
	<p id="test">我是段落1</p>
	<p id="test">我是段落2</p>
    <script>
     //通过元素id获取元素
     //document.getElementById('id'); 
     //返回的是一个唯一的对象, 匹配的是该页面中id相同的第一个元素
		var obj = document.getElementById('test');
		var obj1 = document.getElementById('test');
		console.log(obj);//对象
		console.log(obj1);

		console.log(typeof obj);

		//查看对象的属性和方法

		// console.dir 打印返回的元素对象 更好的查看里面的属性和方法
		console.dir(obj);
        
    </script>
</body>

根据标签名获取

document.getElementsByTagName(‘标签名’); 返回的是对象的集合

快捷方式,按tab键

p#test
<p id="test"></p>

p.test
<p class="test"></p> 

p#test*2
<p id="test"></p>
<p id="test"></p>

p#test{我是段落}*2
<p id="test">我是段落</p>
<p id="test">我是段落</p>

p#test{$}*4
<p id="test">1</p>
<p id="test">2</p>
<p id="test">3</p>
<p id="test">4</p>


p#test{我是段落$}*5
<p id="test">我是段落1</p>
<p id="test">我是段落2</p>
<p id="test">我是段落3</p>
<p id="test">我是段落4</p>
<p id="test">我是段落5</p>

<body>

		<p id="test">我是段落1</p>
		<p id="test">我是段落2</p>
		<p id="test">我是段落3</p>
		<p id="test">我是段落4</p>
		<p id="test">我是段落5</p>

		<script>
			// 1.document.getElementsByTagName('标签名');返回的是 获取过来元素对象的集合  以伪数组的形式存储的
			var lis = document.getElementsByTagName('p');
			console.log(lis);//对象的集合
           // console.log(lis[0]);


	        for(var i = 0; i < lis.length; i++) {
				console.log(lis[i]);
			}

		</script>


ul是无序列表              ol是有序列表
快捷方式,按tab键

ul>li*5
        <ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		

		
ul>li{隐秘的角落}*2
        <ul>
			<li>隐秘的角落</li>
			<li>隐秘的角落</li>
		</ul>
		

ul>li{隐秘的角落$}*2
        <ul>
			<li>隐秘的角落1</li>
			<li>隐秘的角落2</li>
		</ul>



ol#test>ul*3
		<ol id="test">
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</ol>

<body>
	<ul>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
    </ul>
    <ol>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
    </ol>

		<script>
			// 1.document.getElementsByTagName('标签名');返回的是 获取过来元素对象的集合  以伪数组的形式存储的
			var lis = document.getElementsByTagName('li');
			console.log(lis);//对象的集合
          // console.log(lis[0]);

			for(var i = 0; i < lis.length; i++) {
				console.log(lis[i]);
			}
		</script>
	</body>

我只想获取螺旋升天怎么办？

我们是不是可以先获取到ol,在去获取ol里的li

<script>
			// 1.document.getElementsByTagName('标签名');返回的是 获取过来元素对象的集合  以伪数组的形式存储的
			  var ol = document.getElementsByTagName('ol'); 
              console.log(ol);//对象的集合  
              console.log(ol[0].getElementsByTagName('li'));
//遍历打印，和上面一样
		</script>

但是如果有很多个ol。我要获取指定的ol。还向上面一样写吗？

难道我还要去数是第几个吗？而且要是增加了一个ol，数组还要改变。

   <ul>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
  </ul>
    <ol>
         <li>螺旋升天</li>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
  
    </ol>
  
	<ol>
        <li>双十一剁手</li>
        <li>双十一剁手</li>
        <li>双十一剁手</li>
        <li>双十一剁手</li>
    </ol>	

	<ol>
        <li>原神</li>
        ..............
        ..............
    </ol>

刚讲了根据id获取元素document.getElementById(’’);根据标签获取元素document.getElementsByTagName(‘标签名’);

大家想一下，结合这两种来获取指定的ol.

**我只想获取双十一剁手 **

<body>
	<ul>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
        <li>哔哩哔哩</li>
  
    </ul>
    <ol id="test">
         <li>螺旋升天</li>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
        <li>螺旋升天</li>
  
    </ol>

	<ol id="test1">
        <li>双十一剁手</li>
        <li>双十一剁手</li>
        <li>双十一剁手</li>
        <li>双十一剁手</li>
  
    </ol>	
		
		<script>
		 var ol = document.getElementById('test1');
		 console.log(ol);//对象
        console.log(ol.getElementsByTagName('li'));
   //遍历打印，和上面一样
		</script>
	</body>

通过 HTML5 新增的方法获取

document.getElementsByClassName(‘类名’)；根据类名返回元素对象集合

document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象

document.querySelectorAll(‘选择器’); 返回指定选择器的所有元素对象集合

<body>
	
	
    <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  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);//对象
        var nav = document.querySelector('#nav');
        console.log(nav);//对象
        
        
         var div = document.querySelector('div');
         console.log(div);//返回第一个元素对象
          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>
</body>

获取特殊元素（body，html）

获取body元素

document.body // 返回body元素对象

获取html元素

document.documentElement // 返回html元素对象


<body>
    <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>
</body>

);//对象集合

```

获取特殊元素（body，html）

获取body元素

document.body // 返回body元素对象

获取html元素

document.documentElement // 返回html元素对象


<body>
    <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>
</body>