文章目录
1.元素节点（具体的标签例如：html,head,title,p,h1等）
[1. 查询元素/获得元素（进行操作元素，或者元素的属性，文本）](#1. 查询元素/获得元素（进行操作元素，或者元素的属性，文本）)
[2. 操作属性](#2. 操作属性)
[3. 操作CSS样式（一个特殊的属性style）](#3. 操作CSS样式（一个特殊的属性style）)
[4. 操作文本](#4. 操作文本)
[5. 操作元素节点（增加节点/删除节点）](#5. 操作元素节点（增加节点/删除节点）)
简介
DOM结构节点类型划分：元素，属性，文本。 节点的关系
DOM元素的操作，操作元素，操作元素属性，操作css样式，操作文本内容，操作元素节点
一、DOM介绍
DOM(Document Object Model)即文档对象模型。用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示。由一系列对象组成，访问、检索、修改XHTML文档内容与结构的标准方法. 是跨平台语言,顶层是document对象。
二、DOM节点划分类型
1.元素节点（具体的标签例如：html,head,title,p,h1等）
2.属性节点（元素中的属性）
3.文本节点（文本内容）
三、节点关系
父子关系（parent-child）：
<html>元素作为父级，<head>和<body>元素作为子级。
兄弟关系（Sibling）：
<a>和<h1>元素就是兄弟关系。
四、DOM操作内容：
1. 查询元素/获得元素（进行操作元素，或者元素的属性，文本）
获得/查询元素（直接/简介获得对象的方式，id，name，标签名 |子节点，父节点，上节点，下节点）：
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM节点对象获得方式</title>
<script>
// ------------直接获得节点对象的方式
function demo1(){
// id方式直接获得---单个对象
var username = window.document.getElementById('username')
alert(username)
}
// 通过标签名获得多个元素对象
function demo2(){
var inp = document.getElementsByTagName('input')
alert(inp)
alert(inp[2])
alert(inp.length)
}
// 通过name属性获得
function demo3(){
var inp = document.getElementsByName('hobby')
alert(inp.length)
}
//-------- 间接获得元素对象的方式 （父节点，子节点）
function demo4(){
// 获得父节点后，找到下面的子节点
var professional = document.getElementById('professional');
var child = professional.childNodes
console.log(child) //空白为本也算一个节点，所以长度是9
}
function demo5(){
//获得节点id ，找到父节点
var p2 = document.getElementById('p2')
var parent = p2.parentNode
console.log(parent)
}
function demo6(){
// 获得下一个节点
var p2 = document.getElementById('p2')
// var next = p2.nextSibling.nextSibling //包含空白文档
var next = p2.nextElementSibling //不包含空白文档
console.log(next)
// 获得上一个节点
// var up = p2.previousSibling.previousSibling //包含空白文档
var up = p2.previousElementSibling //不包含空白文书
console.log(up)
}
</script>
</head>
<body onload="demo6()">
<form action="" id="form1">
用户名：<input type="text" name="username" id="username" value="输入姓名"><br/>
密码：<input type="password" name="pwd" id="pwd"><br/>
爱好：<input type="checkbox" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="art">绘画
<input type="checkbox" name="hobby" value="sports">体育 <br/>
职业：<select name="professional" id="professional">
<option value="1">工人</option>
<option value="2" id="p2">技术人员</option>
<option value="3">教育职业</option>
<option value="4">医疗行业</option>
</select>
</form>
</body>
</html>2. 操作属性
获得元素的属性，操作元素的属性
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素属性</title>
<script>
function demo1(){
// 方式一（常用，实时更新）：-------获得节点对象的属性，操作元素的属性
//获得id名称是inp1对象节点
var inp1 = document.getElementById('inp1')
//获得对象的属性
var ty = inp1.type
var na = inp1.name
var va = inp1.value
alert(ty+'---'+na+'---'+va)
//操作元素属性
inp1.type = 'button'
inp1.value = '测试改变'
//方式二（默认值，不会改变）：---------获得元素的属性
//获得对象属性的默认值
var ty1 = inp1.getAttribute('type')
var na2 = inp1.getAttribute('na')
var va2 = inp1.getAttribute('value')
alert(ty1+'===='+na2+'==='+va2)
// //操作元素属性(
// inp1.setAttribute('type','button')
}
</script>
</head>
<body>
<input type="text" name="uname" id="inp1" value="张三"/><br />
<input type="button" name="" value="测试元素属性" onclick="demo1()">
</body>
</html>3. 操作CSS样式（一个特殊的属性style）
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素样式</title>
<script>
function demo1(){
var div1 = document.getElementById('div1')
//获得css样式，只支持行内样式css
var wi = div1.style.width
var he = div1.style.height
alert('width:'+wi+'----'+'heigth:'+he)
//操作元素的css样式 对于background 格式的样式在js中使用驼峰命名法进行改变
div1.style.width = '300px'
div1.style.height = '300px'
div1.style.backgroundColor = 'red'
//增加样式:通过增加class类来增加对应的css样式， 注意：className
div1.className = 'div2'
}
</script>
<style>
.div2{
border: 4px solid rgb(0, 0, 0);
}
</style>
</head>
<body>
<!-- 行内样式的css -->
<div id="div1" style="width: 200px; height: 200px; background-color: palegoldenrod;"></div>
<input type="button" neme="" id="" value="操作样式" onclick="demo1()">
</body>
</html>4. 操作文本
获取文本内容，修改文本
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作文本内容和值</title>
<script>
function demo1(){
//获得div1的对象
var div = document.getElementById('div1')
//获得元素的文本内容
var inn = div.innerHTML //获得整个格式,会s识别html中的标签信息 适用于双标签
var inn2 = div.innerText //只获得文本 适用于双标签
console.log(inn)
console.log(inn2)
div.innerHTML += '<h1>1号标签</h1>'
// div.innerText += '<h1>1号标签</h1>'
}
function demo2(){
var in2 = document.getElementById('inp2')
var va = in2.value //不加括号
alert(va)
}
/*注意：
双标签有innerHTML 和 innerText
单标签获都是用value 获得,和获得属性一样
双标签中有两个特殊的标签：select textarea 使用.value
*/
function demo3(){
//获得select对象
var sel = document.getElementById('sele')
alert(sel.value) //没有value属性，直接获取文本，有value属性获得属性值
}
function demo4(){
var te = document.getElementById('tex')
alert(te.value)
}
</script>
</head>
<body>
<div id="div1">
<span>双标签我们不一样</span>
</div>
<input type="button" value="操作元素的文本内容" onclick="demo1()"><br/>
<input type="text" name="inp2" id="inp2" value="" >
<input type="button" value="单标签操作" onclick="demo2()"> <br/>
<select id="sele" onchange="demo3()">
<option value="0">--请选择--</option>
<option value="1">中国</option>
<option >英国</option>
<option >俄罗斯</option>
</select> <br />
<textarea id="tex" rows="10" cols="10">12354</textarea>
<input type="button" value="特殊的双标签" onclick="demo4()">
</body>
</html>5. 操作元素节点（增加节点/删除节点）
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作元素节点对象</title>
<script>
function addNode(){
//获得表单对象
var fom = document.getElementById('fom')
//创建节点的方法 先创建一个p节点，在增加input（file）节点，在增加一个删除节点
var p = document.createElement('p')
p.innerText='照片'
var inp = document.createElement('input')
inp.type = 'file'
var inp2 = document.createElement('input')
inp2.type = 'button'
inp2.value = '删除'
//删除方法
inp2.onclick=function(){
//移除子节点
p.removeChild(inp)
p.removeChild(inp2)
//移除本身
p.remove()
}
//添加节点对象
// fom.appendChild(p)
//获得最后一个节点对象
var lastNode = document.getElementById('lastNode')
//在指定元素之前添加节点
fom.insertBefore(p,lastNode)
p.appendChild(inp)
p.appendChild(inp2)
}
</script>
</head>
<body>
<form id="fom">
<p>
用户名：<input type="text">
</p>
<p>
照片：<input type="file">
<input type="button" value="添加" onclick="addNode()">
</p>
<p id="lastNode">
<input type="button" name="" id="" value="提交">
<input type="button" name="" id="" value="清空">
</p>
</form>
</body>
</html>