DOM节点操作
-
创建元素节点和文本节点
元素节点 :var div = document.createElement('div');
文本节点 :var text = document.createTextNode('');注意 ： 属性节点可以通过元素节点的点语法直接访问和设置
-
添加节点
DOM中对节点的插入 删除 追加操作，都由父元素执行- 在父元素中动态追加子节点
父节点.appendChild(子节点);var div = document.createElement('div'); //将div追加到body中 document.body.appendChild(div); div.parentNode.append(div); 注意 ：文本节点也是元素的子节点 var text = document.createTextNode('hello'); //追加到div中显示 div.appendChild(text); - 在文档的指定位置插入节点
parentNode.insertBefore(newElem,oldElem); 将newElem节点插入到oldElem节点之前 et: var h1 = document.createElement('h1'); //将h1插入在div之前 document.body.insertBefore(h1,div);
- 在父元素中动态追加子节点
-
删除节点
-
如果是删除body的子元素
document.body.removeChild(elem); -
如果元素层级结构较多，就需要通过父节点parentNode执行删除操作
parentNode.removeChild(elem);<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <button onclick="removeElem()">删除div</button> <script> var div = document.createElement('div'); div.id = "container"; div.innerText = "动态创建的div"; console.log(div); //添加到文档中 document.body.appendChild(div); var h1 = document.createElement('h1'); //创建文本节点 var text = document.createTextNode('星期五'); //为节点添加文本内容 h1.appendChild(text); //添加到文档中 div.parentNode.appendChild(h1); //div之前插入h1 div.parentNode.insertBefore(h1,div); //删除节点 function removeElem(){ document.body.removeChild(div); //div.parentNode.removeChild(div); } </script> </body> </html>上方包含三个输入框，一个添加按钮
下方为商品信息展示区域，点击添加之后
将商品信息显示在当前区域，同时显示操作按钮
JS动态创建节点并显示（商品信息展示）<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> table{ width: 600px; border: 1px solid black; border-collapse: collapse; } th,td{ border: 1px solid black; text-align:center; } </style> </head> <body> <p> <input type="text" name="gname" placeholder="商品名称"> <input type="text" name="gprice" placeholder="商品价格"> <input type="text" name="gcount" placeholder="商品数量"> <button onclick="addGoods()">添加</button> </p> <table> <thead> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </body> <script> function addGoods(){ //1. 获取元素节点 var gname = document.getElementsByTagName('input')[0].value; var gprice = document.getElementsByTagName('input')[1].value; var gcount = document.getElementsByTagName('input')[2].value; var tbody = document.getElementsByTagName('tbody')[0]; //2. 创建行 var tr = document.createElement('tr'); //3. 创建四个单元格并且赋值 var tdName = document.createElement('td'); tdName.innerHTML = gname; var tdPrice = document.createElement('td'); tdPrice.innerHTML = gprice; var tdCount = document.createElement('td'); tdCount.innerHTML = gcount; var tdOper = document.createElement('td'); //操作按钮 var btnUpdate = document.createElement('button'); var btnDelete = document.createElement('button'); btnUpdate.innerHTML = "修改"; btnDelete.innerHTML = "删除"; //单元格中添加按钮 tdOper.appendChild(btnUpdate); tdOper.appendChild(btnDelete); //4. 向网页中添加元素 tr.appendChild(tdName); tr.appendChild(tdPrice); tr.appendChild(tdCount); tr.appendChild(tdOper); tbody.appendChild(tr); } </script> </html>
-
-
修改节点
修改元素内容：<body> <p id="pid">Hello</p> <button onclick="demo()">按钮</button> <script> function demo(){ var nv = document.getElementById("pid"); nv.innerHTML="World"; } </script> </body>修改元素标签属性：
<body> <a href="http://www.baidu.com/" id="aid" >呵呵</a> <button onclick="demo()">按钮</button> <script> function demo(){ document.getElementById("aid").href="http://www.jikexueyuan.com"; } </script> </body>替换标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div1,.div2,.div3,.div4{ width: 300px; height: 100px; } .div1{ background-color: green; } .div2{ background-color: yellow; } .div3{ background-color: rebeccapurple; } .div4{ background-color: deeppink; } </style> </head> <body> <div class="div1"> <button onclick="add()">add</button> hello div1 </div> <div class="div2"> <button onclick="del()">del</button> hello div2 </div> <div class="div3"> <button onclick="change()">change</button> <p>hello div3</p> </div> <div class="div4">hello div4</div> <script> function change() { var img=document.createElement("img");//<img src=""> //img.setAttribute("src","meinv.jpg"); img.src="meinv.jpg"; var ele=document.getElementsByTagName("p")[0]; var father=document.getElementsByClassName("div3")[0]; //修改节点 father.replaceChild(img,ele) } function add() { var ele=document.createElement("p");//<p></p> ele.innerHTML="<h1>hello p</h1>"; //ele.innerText="<h1>hello p</h1>"; ele.style.color="red"; ele.style.fontSize="10px"; var father=document.getElementsByClassName("div1")[0]; father.appendChild(ele) } function del() { var father=document.getElementsByClassName("div1")[0]; var son=father.getElementsByTagName("p")[0]; father.removeChild(son) } </script> </body> </html> -
改变 HTML 内容
改变元素内容的最简答的方法是使用innerHTML，innerText。 -
改变 CSS 样式
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
<br> .style.fontSize=48px
获取或设置属性节点的值
操作标签属性
getAttribute(attrName)
作用 ： 获取指定属性的值
attrName : 属性名setAttribute(attrName,value)
作用 ：设置属性和对应的值
attrName : 属性名
value ：属性值removeAttribute(attrName)
作用 ：移除指定属性
attrName : 属性名
可以使用点语法访问元素节点的属性
元素节点.属性名h1.id input.value
创建超链接，链接地址为百度
创建按钮，点击时修改超链接的链接地址
改为 http://www.tmooc.cn
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<H1>js操作属性标签</H1>
<button onclick="getAttr()">获取属性</button>
<button onclick="setAttr()">设置属性</button>
<button onclick="removeAttr()"> 删除属性</button>
<a href="http://www.baidu.com"> 百度</a>
<button onclick="changeLink()">TMMOC</button>
</body>
<script>
//获取元素节点
var h1=document.getElementsByTagName('h1')[0]
//实现函数
function getAttr() {
console.log(h1.className);
}
function setAttr() {
h1.className='redText';
}
function removeAttr() {
h1.className=null;
}
function changeLink() {
//获取元素节点，并修改链接地址
var aLink=document.getElementsByTagName('a')[0];
aLink.href='http://www.tmooc.cn';
aLink.target='_blank';
aLink.innerText="TMOOC";
}
</script>
</html>
操作元素样式
setAttribute()
可以设置元素 class / id 的属性值，对应选择器- 针对类选择器的样式，可以为元素属性className赋值
元素.className = ""; - 使用内联方式添加样式
<h1 style="color:red;"></h1>
元素.style.css属性名
元素.style.css属性名 = "";
注意 ：
如果CSS属性名中有连接符 - ，在JS中访问时一律
改成驼峰标识：
font-size 在JS中 使用 fontSize
background-color backgroundColor
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
#redBack{
background:red;
}
.greenText{
color : green;
text-align : center;
}
</style>
</head>
<body>
<h1>动态修改元素样式</h1>
<div>div</div>
</body>
<script>
//1.获取元素节点
var h1 = document.getElementsByTagName('h1')[0];
var div = document.getElementsByTagName('div')[0];
//2. 设置元素样式
h1.setAttribute('id','redBack');
h1.className = "greenText";
//添加行内样式
div.style.background = "pink";
div.style.width = "200px";
div.style.height = "200px";
</script>
</html>
- 创建div 按钮 输入框
- 验证输入用户名是否在6 - 18 位之间，
在6-18位之间的视为通过，在div中显示绿色的
文本"用户名合法"
如果不合法，div中显示红色文本“用户名不合法”
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
用户名 ：<input type="text" name="uname">
<button onclick="validateName()">验证</button>
<div></div>
</body>
<script>
//1. 获取元素节点
var input = document.getElementsByTagName('input')[0];
var div = document.getElementsByTagName('div')[0];
//2. 验证操作
function validateName(){
if(input.value.length >= 6 && input.value.length <= 18){
//合法
div.innerText = "用户名合法";
div.style.color = "green";
}else{
div.innerText = "用户名不合法";
div.style.color = "red";
}
}
</script>
</html>
- 关于class的操作
elementNode.className返回元素的类名
elementNode.classList属性返回元素的类名列表
elementNode.classList.add
elementNode.classList.remove//模态对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ height: 1800px; background-color: white; } .shade{ position: fixed; top:0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.7; } .model{ width: 200px; height: 200px; background-color: bisque; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide{ display: none; } </style> </head> <body> <div class="content"> <button onclick="show()">show</button> hellohellohellohellohellohellohellohellohellohellohellohello </div> <div class="shade hide"></div> <div class="model hide"> <button onclick="cancel()">cancel</button> </div> <script> function show() { var ele_shade=document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; console.log(ele_model.classList); console.log(ele_shade.classList); //删除 <div class="shade hide"></div>中 class中的hide， ele_model.classList.remove("hide"); //删除--><div class="model hide"> // <button οnclick="cancel()">cancel</button> // </div> //中的class中的hide ele_shade.classList.remove("hide"); } </script> </body> </html>
328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
