DOM 详细 一篇就够【重点】

DOM相关操作

JavaScript分为三个部分，我们在之前说道，JS分为三个部分，ECMAscript，DOM,和BOM;详细的在这里…JavaScript历史;

至此我们ECMAscript部分已经学完，加下来就是DOM部分,DOM是文档对象模型，顾名思义也就是操纵我们我们之前写的html部分的标签的。之前有一个大佬曾经说过，万物皆对象…

DOM都有哪些操作呢？

我们先看图示：

明显看出DOM分为四个重要部分（都是操作）

1. 操作元素内容
2. 操作元素属性
3. 操作表单属性
4. 操作元素类名

操作元素内容：

我们都知道，如果你想做一件事，假如你想去写作业，那就必须做好准备工作，比如获取到笔和本之后你才可以挥洒自如，那么我们聊聊怎么获取目标元素…

获取目标元素
我们知道，在以前我们写css样式的时候，我们可以通过标签获取目标标签，也可以通过，类，id,伪元素，等等…那么我们的js获取相应对象也是一样的只不过需要一些不同的语句，都哪些呢？看下面细聊…

我们先设置一个场景，来通过不容的语法获取不同的标签，看代码…

	<div></div>                          // 普通标签
    <div class="box"></div>             //  含类标签
    <div id="box"></div>               //   含id标签

下面通过不同方法分别获取上面的标签：

		// 通过id获取
        var box  = document.getElementById('id');   // 此时获取的是第三个div

		// 通过class获取
        var box = document.getElementsByClassName('box');   // 此时获取的是第二个div
      	// 通过类名获取这里多一句解释,我们都知道id是具有唯一性的，但是类是具有普遍性的，那么使用这	条语句也就会获取所又class为box的标签，
		// 因此我想说： 他的返回结果是一个伪数组，伪数组这里我就不做解释了，之前在前文中已经提到多次

		// 通过标签名获取
        var box = document.getElementsByTagName('div');  // 此时获取的是第一个div	
        // 这种方式获取范围比类名更加广泛，明显获取的值也是一个伪数组，可以通过获取元素的[i]索引获取相应的目标标签

除以上三种方式：HTML5中推出了新的获取方式，但是有兼容问题哦，如果你不考虑兼容问题，可以直接使用，也是非常方便，document.querySelector();怎么使用呢？接着上面的例子说：

	// 通过标签名获取
	var box = document.querySelector('div');	 // 参数直接传div就可以获取第一个div，那么你要问了，不应该获取的是所有的div么？并且不应该以伪数组的形式输出么?那么看下面的一行代码
	var box = document.querySelectorAll('div');  // 与上面一句相比较有什么区别？明显看出，驼峰命名法中多了一个ALL，那么加上这个ALL也就与getElementsByTagName('div')效果一样啦.

	// 通过类名获取
	var box = document.querySelector('.box');  // 与前面一样，语法中没有All的,都只是获取第一个目标标签
	var box = document.querySelectorAll('.box'); // 获取所有类名为box的标签

	// 通过id名获取
	var box = document.querySelector('#box');    // 同上
	var box = document.querySelectorAll('#box'); // 同上
	

是不是很方便，因为就两句代码，却可以获取所有的你想要的…快去try try吧…

我们现在知晓怎么获取目标标签了，那么接下来就可以进行一系列操作了…

如何获取目标元素内容：

<div id="box">123456798</div>

//获取上面元素第一种方式
var box = document.querySelector('#box');
alert(box.innerText);

第二种方式
alert(box.innerHTML);

显示结果都是：

inner.Text 与 inner.HTML有什么区别呢？

他们的区别在于两点，第一种是老版本浏览器时有的属性，只能获取目标标签的内容，但是不能识别标签，第二种是W3C组织推出的，它不仅仅能获取目标标签的内容而且还能获取目标标签中的其他标签。看以下例子对比…

分别是用以上inner.Text 与 inner.HTML修改目标标签的值

box.innerText = '123'+'<br>'+'456';  // 相当于把目标标签的内容修改为123<br>456
box.innerHTML = '123'+'<br>'+'456';  // 此时就可以识别出里面的换行语句，输出结果为：132 换行  456 

对比以上输出结果，容易得出innerHTML比innerText多了一种能识别html标签的功能。建议使用innerHTML

使用场景：

1. 更换目标元素的内容

---

操作元素属性：

操作元素属性步骤：

首先，第一步依旧是获取目标标签，获取以后然后再根据获取的标签对象找他有的属性，那么一般情况下，普通标签的属性无非是：href,src,title,alt

想改变他们的属性，很简单，与上面操作元素内容是一样的，这里就不做过多的代码演示…

聊聊使用场景吧:

1. 对象.src = ‘目标地址’; (可以通过此语句改变目标文件，比如切换图片等)
2. 对象.href = ‘目标链接’; (可以通过该语句改变目标网页);
3. 对象.alt = ‘目标替换文本’; (在图片信息改变的时候，这个同时设置)
4. 对象.title = ‘目标图片提示信息’;（在图片改变的时候，他的提示信息也是改变的）

操作表单属性：

首先，第一步获取目标标签，第二步找到该表单中都有哪些属性，然后通过对象.属性 = '值';来修改目标属性的值…

表单属性一般有：type ,value,disabled

使用场景：

1. 对象.type = ‘更换表单类型’;
2. 对象.value = ‘更换表单的内容’ ； // 此时要注意修改表单的内容可不是修改他的innerHTML哦!
3. 对象.disabled = ‘true’; // 可以设置表单是否不可用，默认为false 为可用

操作样式属性：

我们在学习JavaScript以前修改样式使用的是,css，但是有了js我们就可以动态的设置css的样式,设置方式一共有两种，并且还要讲一种保存之前目标标签本身就有的类，或者设置多个样式类…

普通修改：

// 结构
<div id="box">123456798</div>  

		// 点击目标盒子，显示一个红色背景
 		var box = document.querySelector('#box');
        box.onclick = function() {
            this.style.backgroundColor = 'red';
        }

点击以后的效果：

这是修改一个，那么修改多个我们要重复写许多 对象.style.样式 = '样式值';当然我们是有很好的解决思路的，有一个新的属性className= '值';这个属性可以给目标元素添加事先定义好的样式类，直接把类名写到值里面就可以了…看操作

			// 设置红色背景的样式
			.red {
                background-color: red;
            }

		// 通过给目标盒子添加red的样式类，来改变他的背景
		var box = document.querySelector('#box');
        box.onclick = function() {
            this.className = 'red';
        }

显示结果是一样的：

那么你要问了，如果要在这个红色背景的基础上再改变一些其他样式呢？看操作，添加多个类即可…

			// 样式类
			 .red {
                background-color: red;
            }
            // 新添加样式类
            .font_size {
                font-size: 2em;
            }

		// 再添加一个类，同时也保留了原来的红色背景类
		var box = document.querySelector('#box');
        box.onclick = function() {
            this.className = 'red font_size';
        }

以上就是DOM的相关操作，多敲多练哦…

不断复盘，不断优秀，让自己成为镜子里想成为的那个人.关注三连，持续更新~~~