JavaScript基础（三）
文章目录
简介
一、DOM介绍
二、DOM节点划分类型
1.元素节点（具体的标签例如：html,head,title,p,h1等）
2.属性节点（元素中的属性）
3.文本节点（文本内容）
三、节点关系
父子关系（parent-child）：
兄弟关系（Sibling）：
四、DOM操作内容：
1. 查询元素/获得元素（进行操作元素，或者元素的属性，文本）
2. 操作属性
3. 操作CSS样式（一个特殊的属性style）
4. 操作文本
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，标签名 |子节点，父节点，上节点，下节点）：
<!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.childNodesconsole.log(child) //空白为本也算一个节点，所以长度是9}function demo5(){//获得节点id ，找到父节点var p2 = document.getElementById('p2')var parent = p2.parentNodeconsole.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. 操作属性
获得元素的属性，操作元素的属性
<!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.typevar na = inp1.namevar va = inp1.valuealert(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）
<!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样式，只支持行内样式cssvar wi = div1.style.widthvar he = div1.style.heightalert('width:'+wi+'----'+'heigth:'+he)//操作元素的css样式 对于background 格式的样式在js中使用驼峰命名法进行改变div1.style.width = '300px'div1.style.height = '300px'div1.style.backgroundColor = 'red'//增加样式:通过增加class类来增加对应的css样式， 注意：classNamediv1.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. 操作文本
获取文本内容，修改文本
<!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. 操作元素节点（增加节点/删除节点）
<!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>