js--Dom(四) 样式+节点操作
2019-01-15 19:47
681 查看
样式操作—获取和设置样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 获取样式
语法：元素.style.css样式名
如果要操作的样式名是两个单词组合成的，那么要去掉"-"，再把第2个单词首字母改成大写
设置样式
1.设置单个样式: 元素.style.css样式名=值;
2.设置多个样式：元素.style.cssText="样式1:值1;样式2:值2...样式n:值n";
-->
<div id="dd" style="background-color: red;color: white;font-size: 28px;">我是div里的内容</div>
<input type="button" id="btn1" value="获取div的样式" />
<input type="button" id="btn2" value="设置div的样式" />
<input type="button" id="btn3" value="设置div的多个样式" />
<script>
//获取按钮
var btn1=document.getElementById('btn1');
//获取要操作的div
var div= document.getElementById('dd');
//添加单击事件
btn1.onclick=function(){
//获取div的color样式
var color= div.style.color;
console.log("颜色："+color);
//获取div的background-color
var bgColor= div.style.backgroundColor;
console.log("背景色："+bgColor);
var size= div.style.fontSize;
console.log("字体大小："+size);
}
//获取按钮
var btn2=document.getElementById('btn2');
//添加单击事件
btn2.onclick=function(){
//设置div的color为绿色
div.style.color="green";
//设置div的背景色为蓝色
div.style.backgroundColor="blue";
}
//获取按钮
var btn3=document.getElementById('btn3');
btn3.onclick=function(){
//给div设置color,背景色2个样式
div.style.cssText="color:blue;background-color: yellow;";
}
</script>
</body>
</html>
节点—节点关系
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--parentNode:访问父节点
children:访问子节点，返回的是所有子节点构成的数组
-->
<div id="parent" style="background-color: yellow;">
<button id="btn1">获取父节点</button>
</div>
<ul id="parentUl">
<li>重庆</li>
<li>上海</li>
<li>武汉</li>
</ul>
<button id="btn2">获取ul的子节点</button>
<script>
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
//按钮的父节点
var pnode=btn1.parentNode;
console.log(pnode.style.backgroundColor);
}
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
//获取ul
var ul=document.getElementById('parentUl');
//获取子节点
var childs= ul.children;
for(var i=0;i<childs.length;i++){
console.log(childs[i]);
}
}
</script>
</body>
</html>
节点—节点操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="parent">
<h1>我是标题</h1>
<span id="msg">我是一个span</span>
<span id="msg2">我是第2个span</span>
</div>
<input type="button" id="btn1" value="插入节点到末尾" />
<input type="button" id="btn2" value="插入节点到参考节点前" />
<input type="button" id="btn3" value="删除节点" />
<script>
/* 插入节点:
1.父节点.appendChild():参考父节点,插入到父节点的末尾
* 2.父节点.insertBefore(新节点，参考节点)： 在参考节点前插入一个新的节点
* 3.父节点.removeChild(子节点)：删除一个子节点
*
* */
var btn1=document.getElementById('btn1');
//父节点
var div=document.getElementById('parent');
//给按钮添加单击事件
btn1.onclick=function(){
//1.创建节点
var h2= document.createElement('h2');
h2.innerHTML="我是新标题标签";
//2.往父节点中插入
div.appendChild(h2);
}
var btn2=document.getElementById('btn2');
var span=document.getElementById('msg');
btn2.onclick=function(){
//1.创建节点
var h3= document.createElement('h3');
h3.innerHTML="我是新标题标签h3";
//2.在参考节点span前插入新节点
div.insertBefore(h3,span);
}
var btn3=document.getElementById('btn3');
btn3.onclick=function(){
//删除第1个span
//div.removeChild(span);
//在不知道父节点的情况下，可以先通过parentNode获取父节点，再来删除
span.parentNode.removeChild(span);
}
</script>
</body>
</html>
节点—节点复制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent{
background-color: yellow;
width: 300px;
height: 300px;
}
#desc{
width:400px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<div id="parent">
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
</div>
<input type="button" id="btn" value="复制节点" />
<div id="desc">
</div>
<script>
/**
* 复制节点的语法：
* 要复制的节点.cloneNode(参数)，参数为true表示深复制，即复制节点及它的子节点
* false表示浅复制，只复制节点本身，不复制子节点，返回复制后的节点(原始节点的副本)
* 注意：调用appendChild插入节点时，如果希望它本身还保留在文档中，那么就要先对它做一个复制,
* 调用cloneNode()返回它的副本(复印件)，否则该节点就直接消失了(剪切)
*/
var btn=document.getElementById('btn');
btn.onclick=function(){
//获取要复制的节点
var parentDiv=document.getElementById('parent');
//返回复制后的新节点
var newNode= parentDiv.cloneNode(false);
document.getElementById('desc').appendChild(newNode);
//document.getElementById('desc').appendChild(parentDiv);
}
</script>
</body>
</html>
添加和删除案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#parent{
background-color: yellow;
width: 300px;
height: 300px;
}
#desc{
width:400px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<table id="mytable" width="50%" border="1" cellpadding="10" cellspacing="0">
<!-- 有些浏览器不会生成tbody标签，如果发现了有tbody，就自己手动用tbody包裹所有的tr -->
<tbody>
<tr>
<th>姓名</th><th>性别</th><th>年龄</th><th>操作</th>
</tr>
<tr>
<td>张三丰</td><td>男</td><td>80</td><td> <input type="button" name="btn2" value="删除一行" onclick="deleteRow(this)"></td>
</tr>
</tbody>
</table>
<input type="button" id="btn1" value="添加一行">
<script>
var btn1= document.getElementById('btn1');
//点按钮1，添加一行
btn1.onclick=function(){
//创建1行
var tr=document.createElement('tr');
//设置内容
tr.innerHTML="<td>赵敏</td><td>女</td><td>23</td><td><input type='button' name=\"btn2\" value='删除一行' onclick=\"deleteRow(this)\" ></td>";
//获取tbody
var tbody= document.getElementsByTagName('tbody')[0];
tbody.appendChild(tr);
}
//点按钮2，删除一行
//直接给删除按钮添加事件，不按事件的三要素来添加事件，直接在删除按钮上添加onclic事件，该事件调用的函数是deleteRow
function deleteRow(btn){
//通过删除按钮找到它所在的行，再删除行
var tr= btn.parentNode.parentNode;
tr.parentNode.removeChild(tr);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS 操作Dom节点之样式
- js DOM节点创建，操作，删除，替换
- js之DOM操作（访问父节点parentNode）
- js和jquery对dom节点的操作(创建/追加)
- 学习JS中的DOM节点以及操作
- JS:DOM相关：table对象，节点操作
- 怎么用js操作dom节点的一些方法
- js操作dom节点，创建,复制,删除,添加,查找等操作总结
- JS操作DOM节点实现网页更新
- js学习小结（十）2014.5.10.11(DOM2和DOM3的变化，操作样式的DOM API（1）)
- JS对DOM节点的操作--增加节点，删除节点
- css的hover事件，如果点击之后通过js操作样式，hover事件就会失效的处理方法，外部css样式与js的DOM样式谁的权重高？
- js+DOM创建和操作节点
- js操作dom（4）-关于xml节点属性的操作
- JS操作DOM节点实现网页更新
- 3.4 JS 排他思想&&节点&&dom 的节点操作
- JS DOM详解之节点的增加、删除、替换、复制，属性设置和获取，样式设置和获取
- js之DOM操作（替换元素节点replaceChild()）
- js获取节点 dom操作
- javaweb_js的dom节点操作应用