续DOM
2018-09-06 本文已影响0人
努力进化
dom01
1.点击按钮在ul中添加li
<input type="text" id="txt">
<button id="btn">btn</button>
<ul id="parent">
</ul>
<script>
var parent = document.getElementById("parent");
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function () {
let value = txt.value;
let li = document.createElement("li");
li.innerHTML = value;
parent.appendChild(li);
}
</script>
01.png
2.firstElementChild(第一级元素)
<ul id="parent">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var parent = document.getElementById("parent");
var first = parent.firstElementChild;
console.log(first);
if (first) {
first.style.color = "red";
} else {
parent.firstChild.style.color = "green"
}
</script>
firstElementchild.png
3.setAttribute(设置元素属性)
oDiv.style.display = "none";
oDiv.style["display"]="none";
oDiv.setAttribute("style","display:none");
效果：一个点击出现hello world 另一个点击div消失。
<input type="text" id="txt">
<button id="btn">btn</button>
<div id="test">
hello world!
</div>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
btn.onclick = function () {
// txt.value = "hello world"
txt.setAttribute("value", "hello world")
}
var test=document.getElementById("test");
test.onclick=function(){
test.setAttribute("style","display:none");
// test.style.setProperty("display","none");
}
</script>
4.动态添加表格
<style>
table,th,td{
border:1px solid #333;
width:500px;
line-height:50px;
text-align: center;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<h4>动态添加表格</h4>
<div>
<input type="text" id="shop">
<input type="text" id="cellPhone">
<button id="add">add</button>
</div>
<table id="table">
<thead>
<tr>
<th>商城</th>
<th>手机</th>
</tr>
</thead>
<tbody>
<tr>
<td>天猫</td>
<td>小米</td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tBody = table.tBodies[0];
let shop = document.getElementById("shop");
let cellPhone = document.getElementById("cellPhone");
let add = document.getElementById("add");
add.onclick = function () {
let tr = document.createElement("tr");
let td1 = document.createElement("td");
td1.innerHTML = shop.value;
tr.appendChild(td1);
let td2 = document.createElement("td");
td2.innerHTML = cellPhone.value;
tr.appendChild(td2);
tBody.appendChild(tr);
}
</script>
动态添加表格.png
5.表格隔行变色
<style>
table,
th,
td {
border: 1px solid #333;
width: 500px;
line-height: 50px;
text-align: center;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="table">
<thead>
<tr>
<th>商城</th>
<th>手机</th>
</tr>
</thead>
<tbody>
<tr>
<td>天猫</td>
<td>小米</td>
</tr>
<tr>
<td>天猫</td>
<td>小米</td>
</tr>
<tr>
<td>天猫</td>
<td>小米</td>
</tr>
<tr>
<td>天猫</td>
<td>小米</td>
</tr>
<tr>
<td>天猫</td>
<td>小米</td>
</tr>
</tbody>
</table>
<script>
let table = document.getElementById("table");
let tHead = table.tHead;
let tRows = table.tBodies[0].rows;
console.log(tRows);
tHead.style.backgroundColor = "#ff2d51";
for (let i = 0; i < tRows.length; i++) {
if (i % 2 == 0) {
tRows[i].style.backgroundColor = "#eee";
} else {
tRows[i].style.backgroundColor = "#44cef6"
}
}
</script>
表格隔行变色.png
dom02
1.cssText
效果：点击div添加css样式
相比下面的style.##简单些。
<div id="test">hello world</div>
<script>
var test = document.getElementById("test");
test.onclick = function () {
this.style.cssText = "border:1px solid #333;color:red";
// 与下面两行代码意思相同。
// this.style.border="1px solid #333";
// this.style.color="red";
}
</script>
2.length
弹框显示css长度为3.
<div id="test" style="color:red;font-size: 18px;background-color: aqua">hello world</div>
<script>
var test = document.getElementById("test");
test.onclick = function () {
alert(this.style.length)
}
</script>
3.getPropertyValue() 获取属性值
该例子是查看该元素的color属性值
<body>
<div id="test" style="color:red;font-size: 18px">hello world</div>
<script>
var test = document.getElementById("test");
test.onclick = function () {
alert(this.style.getPropertyValue("color"))
console.log(this.style.color)
}
</script>
</body>
4.setProperty() 获取属性
就是div得到一个color属性
<body>
<div id="test" style="font-size: 18px">hello world</div>
<script>
var test = document.getElementById("test");
test.onclick = function () {
this.style.setProperty("color", "red");
}
</script>
</body>
setProperty.png
5.removeProperty() 移除属性
点击div移除div的color属性
<body>
<div id="test" style="color:red;font-size: 18px">hello world</div>
<script>
var test = document.getElementById("test");
test.onclick = function () {
this.style.removeProperty("color")
}
</script>
</body>
