JavaScript操作DOM对象

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”

（Document Object Model）。它的作用是将网页转为一个

JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删

内容）

节点的类型有七种 :

Document：整个文档树的顶层节点

DocumentType：doctype标签

Element：网页的各种HTML标签 ,比如a标签 br等

Attribute：网页元素的属性（比如class="right"）

Text：标签之间或标签包含的文本 ，文本也算节点

Comment：注释

DocumentFragment：文档的片段（不常用忽略）

节点树：

浏览器原生提供document节点，代表整个文档

document
// 整个文档树

除了根节点，其他节点都有三种层级关系

• 父节点关系（parentNode）：直接的那个上级节点
• 子节点关系（childNodes）：直接的下级节点
• 同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性：

不同节点的nodeType值不同

文档节点（顶层节点）：9，，对应常量 Node.DOCUMENT_NODE

元素节点：1 ，对应常量Node.ELEMENT_NODE

属性节点：2，对应常量Node.ATTRIBUTE_NODE

文本节点：3，对应常量Node.TEXT_NODE

文档片断节点：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

可以用来判断节点类型：

 if (document.nodeType==9){console.log("这是document文档节点")}

访问节点：

使用getElement系列方法访问指定节点：

getElementById()：根据id获取特定DOM元素

getElementsByName()：根据name属性的值获取元素

getElementsByTagName()：根据标签名获取元素

document.getElementsByName('myInput')。

document.getElementsByTagName('div')：

通过这个str可以是一个数组，访问0来获取对应的值

var str = document.getElementsByTagName("div")[0]
console.log(str);

否则就显示：

var str = document.getElementsByTagName("div");
console.log(str);

修改标签内的内容：innerHTML

这样就可以达到通过JS修改页面内容

<div>aaa</div>
<div>bbb</div><script>var str = document.getElementsByTagName("div")[0]str.innerHTML="蛋蛋";
</script>

document.getElementsByClassName()：

也可以通过innerHtml修改

<input class="input01">aa</input><script>var str02 = document.getElementsByClassName("input01");console.log(str02);
</script>

输出内容就是这样，可以用这种数组的方式输出具体的

var str02 = document.getElementsByClassName("input01")[0];

document.getElementById('myElement')：

通过s这个方法可以直接输出，就不像上面的需要读一群然后挨个输出，因为id只有一个

var str03 = document.getElementById("打打");
console.log(str03);

document.querySelector() ：

方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null。

var el1 = document.querySelector('.myclass');

document.querySelectorAll()：

document.querySelectorAll 方法与 querySelector 用法类似，区别是返回一个NodeList 对象，包含所有匹配给定选择器的节点

var elementList =document.querySelectorAll('.myclass');

根据层次关系访问节点：

访问节点：

感觉跟脱了裤子放屁一样。。。

属性名称	描述
parentNode	返回节点的父节点	document.getElementById("child").parentNode;
childNodes	返回子节点集合，childNodes[i]	var childNode = document.getElementById("child").parentNode;这个返回的值childNode是一个集合
firstChild	返回节点的第一个子节点
lastChild	返回节点的最后一个子节点
nextSibing	获取当前节点的下一个兄弟节点	document.getElementById("first").nextSibling;
previousSibing	获取当前节点的上一个兄弟节点

element属性：

和上面比多了一个element，是因为上面的会把换行也当作节点，而带element的不会这样

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibing	上一个节点

element对象属性：

Element.id：

Element.id 属性返回指定元素的 id 属性，该属性可读写

var p = document.querySelector('p');
p.id 

Element.className：

var div = document.getElementById('myDiv');
div.className

节点信息

nodeName：节点名称

nodeValue：节点值

nodeType：节点类型

需要举例子补充

操作节点:

操作节点属性：

getAttribute("属性名")

setAttribute("属性名","属性值")

创建节点：

createElement（tagName）创建一个标签名为tagName的新元素节点

var newDiv = document.createElement('div');
newDiv.innerHTML="你好小蛋蛋";
// 将新创建的div添加到body中
document.body.appendChild(newDiv); 
//打印标签
console.log(newDiv);

document.createTextNode()：

用来生成文本节点（ Text 实例），并返回该节点。

A.appendChild(B) 把B节点追加至A节点的末尾

也可以添加内容

var newDiv = document.createElement('div');
// 使用 document.createTextNode 创建文本节点
var newContent = document.createTextNode('Hello');
//新创建的节点添加这个新建内容
newDiv.appendChild(newContent);
// 将新创建的 div 添加到 body 中
document.body.appendChild(newDiv);

document.createAttribute()：

生成一个新的属性节点（ Attr 实例），并返回它

这里放入属性值和属性不再使用appendChild

使用value给属性赋值

使用setAttributeNode把赋值后的属性放到标签里面

 var text = document.createElement("p");//创建属性var id = document.createAttribute("id");//直接用value给属性赋值id.value = "first";//把赋值后的属性放到标签p里text.setAttributeNode(id);console.log(text);

insertBefore（A，B） 把A节点插入到B节点之前

cloneNode（deep） 复制某个指定的节点

删除和替换节点:

removeChild( node) 删除指定的节点

replaceChild( newNode, oldNode) 用其他的节点替换指定的节点

container.replaceChild(newNode, oldNode);

操作节点的样式：

style属性：

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

• onclik：当用户单击某个对象时调用事件
• onmouseover：鼠标移到某元素之上
• onmouseout：鼠标从某元素移开
• onmousedown：鼠标按钮被按下

<div id="myDiv" onclick="changeColor()">点击我!</div><script>function changeColor() {// 随机生成颜色const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);// 改变 div 的背景颜色document.getElementById('myDiv').style.backgroundColor = randomColor;}</script>

function over(){document.getElementById("cart").style.backgroundColor="#ffffff";document.getElementById("cart").style.zIndex="100";document.getElementById("cart").style.borderBottom="none";document.getElementById("cartList").style.display="block";document.getElementById("cartList").style.position="relative";document.getElementById("cartList").style.top="-1px";
}

className属性：

HTML元素.className="样式名称"

function over(){document.getElementById("cart").className="cartOver";document.getElementById("cartList").className="cartListOver";}
function out(){document.getElementById("cart").className="cartOut";document.getElementById("cartList").className="cartListOut";}

获取元素的样式：

HTML元素.style.样式属性;

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

总结：操作元素属性，内容，样式

方法	说明
getAttribute（"属性名"）	根据元素名获得元素属性值
setAttribute（"属性名"，"属性值"）	设置元素某个属性的值
className	操作元素的class属性（）	e.className = "chen";
innerHTML	操作元素内容	li.innerHTML = "孙悟空";
innerText	操作元素文本内容	li.innerText= "孙悟空";
e.style.css	操作css，只能操作行内样式
value	操作表单元素值	赋值：document.getElementById("cityname").value = 103;

注意：checked是boolean值，在单选框和多选框里面经常出现，像这种给checked赋值就就可以等于true或false

//单选框赋值，性别
var sexs = document.getElementsByName("sex");
//默认男
sexs[0].checked = true;

重要例题：表单取值，和表单赋值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form>用户名：<input type="text" id="username"/><br>密码：<input type="password" id="userpassword" autocomplete="current-password"><br>
<!--    多选框-->爱好：<br><input  class="lovers" value="111" type="checkbox">唱<input class="lovers" value="222" type="checkbox">跳<input class="lovers" value="333" type="checkbox">RAP<br><!--    单选框-->性别：<br><input name="sex" value="1"  type="radio">男<input name="sex" value="0" type="radio">女<br>
<!--    下拉列表-->国家:<select id="cityname"><option value="101">中国</option><option value="102">美国</option><option value="103">鹰国</option></select><br>
</form>
<button onclick="qvZhi()">立即注册</button>
<button onclick="fuZhi()">表单赋值</button><script>function qvZhi(){//用户名var user =  document.getElementById("username").value;console.log("用户名"+user);//密码var password =  document.getElementById("userpassword").value;console.log("密码"+password);//爱好,多选框var lovervalue = document.getElementsByClassName("lovers");var lovers = new Array();for (var i=0;i<lovervalue.length;i++){//如果被选中，放到lovers数组中if (lovervalue[i].checked){lovers.push(lovervalue[i].value);}}console.log("爱好value有:"+lovers)//性别单选框//当用户选择一个单选框时，它的 checked 属性会变为 true。这意味着该单选框被选中。如果单选框没有被选中，则其 checked 属性为 falsevar sexs = document.getElementsByName("sex");var sex = 1;for (var i = 0;i <sexs.length;i++){//判断boolean值if (sexs[i].checked){sex = sexs[i].value;}}console.log("性别value为："+sex);//下拉列表，国家var city = document.getElementById("cityname").value;console.log("国家value为："+city)}function fuZhi() {//用户名赋值document.getElementById("username").value="张三";//密码赋值document.getElementById("userpassword").value="111222";//爱好赋值var lovers = document.getElementsByClassName("lovers");for (var i=0;i<lovers.length;i++){lovers[2].checked = true;lovers[0].checked = true;}//单选框赋值，性别var sexs = document.getElementsByName("sex");//默认男sexs[0].checked = true;document.getElementsByName("sex").checked="0";//下拉列表赋值，国家document.getElementById("cityname").value = 103;}</script></body>
</html>