js对html的操作之DOM

1、什么是DOM

DOM(Document Object Model)是关于如何获取、修改、添加或删除HTML元素的标准。它定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

2、HTML元素的获取

//1、通过id来获取单个元素
<button id="button">点击</button>
<script>
var press = document.getElementById("button");//获取id为button的按钮元素
</script>

//2、通过类名获取所有该class元素
<button class="button">重置</button>
<button class="button">提交</button>
<script>
var press = document.getElementByClassName("button");//获取class为button的按钮元素
</script>

//3、通过标签名获取该标签元素
<button>重置</button>
<button>提交</button>
<script>
var press = document.getElementByTagName("button");//获取文档中所有button标签的元素
</script>

//4、通过name值获取多个元素
<button name="button">重置</button>
<button name="button">提交</button>
<script>
var press = document.getElementByName("button");//获取name值为button的按钮元素
</script>

3、元素的样式修改

//先获取要修改的元素，再对元素的样式进行修改
var div = document.getElementsByTagName("div")[1]; //获取第二个div
div.style.background = "red";
div.style.fontSize = "32px";

4、元素的属性

4.1 判断指定元素是否有指定属性

var div = document.getElementById("div1");
console.log(div.hasAttribute("class"));

4.2 设置元素属性，属性名，值

var div = document.getElementById("div1");
console.log(div.setAttribute("style","color:white;background:black"));

4.3 获取属性值

var div = document.getElementById("div1");
console.log(div.getAttribute("class"));

4.4 删除属性

var div = document.getElementById("div1");
div.removeAttribute("class");

5、创建内容或文本

5.1 创建内容

var div = document.getElementById("div1");  //获取id为"div1"的div
div.innerHTML = "<p>innerHTML</p>"; //在获取的div中清除原本内容并写入HTML内容

5.2 创建文本

var div = document.getElementById("div1");  //获取id为"div1"的div
div.innerText = "<p>innertext</p>";  //在获取的div中清除原本内容并写入HTML文本

5.3 扩展

利用写入的过程中会清除原先的内容的特性，可以用来清除某个元素内的内容

var div = document.getElementById("div1");
div.innerText = ""; //清空内容

6、添加元素

// 在id为div1的div中添加内容为文本内容的p标签和id为div2的div标签
var div = document.getElementById("div1");
var clone = document.getElementById("div2").cloneNode(true); //克隆id为div2的节点
var p = document.createElement("p");  // 创建p标签
var text = document.createTextNode("文本节点内容");  // 创建文本节点
p.appendChild(text);  // 在p标签中添加text节点
div.appendChild(p);  // 在div元素中添加p标签
div.appendChild(clone);  // 在div中添加克隆的节点

/*
	createElement：创建对象，类型自己设置，类型可以是各类标签
	createTextNode：创建文本节点，就是文本内容
	cloneNode：克隆节点
	appendchild：在指定标签的子元素尾部添加元素
	注意：由于获取到的元素是一个对象，对对象赋值其实是对对象的地址进行赋值，重复添加同一个地址对象的数量并没有增加，上诉代码中若是不对div2进行克隆后再赋值的话，div1中并不会出现div2。
*/

7、事件

DOM允许js对HTML事件作出反应，当事件发生时，可以执行js，例如点击某个元素时执行相应的js代码。

// 点击按钮在HTML中添加元素
var press = document.getElementById("button");//获取按钮对象
var div1 = document.getElementById("div1"); //获取div1对象
var new_div = document.getElementById("div2").cloneNode(true); //克隆div2获得new_div对象
press.onclick = function () { //定义点击按钮事件
    console.log(new_div);
    div1.appendChild(new_div);
    //向div1标签中添加new_div，添加子节点对象其实是内存地址赋值，重复添加同一个地址对象的数量并没有增加
}

事件函数如下：