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 属性为 false
var 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>原文地址：https://blog.csdn.net/qq_62859013/article/details/142857549
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！