01-复习
DOM
DOM
获取元素
document.getElementById
document.getElementsByClassName
document.getELementsByTagName
document.querySelector
document.querySelectorAll
常见属性
src href innerHTML value type alt style id className
自定义属性
getAttribute(name)
setAttribute(name, value)
removeAttribute(name)
操作阶段
parentNode
children
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
创建
document.createElement(tagName)
添加
appendChild(obj)
insertBefore(obj, 在哪个子元素之前添加)
删除
remove()
removeChild()
克隆
cloneNode(true)
元素大小
obj.offsetWidth / offsetHeight
obj.clientWidth / clientHeight
obj.scrollWidth / scrollHeight
非行间样式
getComputedStyle(obj).xxx
obj.currentStyle.xxx
元素位置
obj.offsetLeft / offsetTop 定位父级
obj.getBoundingClientRect().left / top / right / botttom 绝对位置
02-分数排序练习
简化代码
<style>
table {
width: 600px;
border-collapse: collapse;
}
tr,
td,
th {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID <input type="button" value="排序" /></th>
<th>语文 <input type="button" value="排序" /></th>
<th>数学 <input type="button" value="排序" /></th>
<th>英语 <input type="button" value="排序" /></th>
<th>总分 <input type="button" value="排序" /></th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>99</td>
<td>110</td>
<td>30</td>
<td>239</td>
</tr> -->
</tbody>
</table>
<script>
var arr = [
{
id: 1,
cn: 99,
math: 110,
en: 30,
total: ''
},
{
id: 2,
cn: 60,
math: 82,
en: 73,
total: ''
},
{
id: 4,
cn: 30,
math: 55,
en: 23,
total: ''
},
{
id: 3,
cn: 70,
math: 35552,
en: 79,
total: ''
}
]
var oTbody = document.querySelector('tbody')
arr.forEach(function (ele) {
oTbody.innerHTML += `<tr>
<td>${ele.id}</td>
<td>${ele.cn}</td>
<td>${ele.math}</td>
<td>${ele.en}</td>
<td>${ele.cn + ele.math + ele.en}</td>
</tr>`
})
// oTbody.innerHTML += `<tr>
// <td>${arr[0].id}</td>
// <td>${arr[0].cn}</td>
// <td>${arr[0].math}</td>
// <td>${arr[0].en}</td>
// <td>${arr[0].cn + arr[0].math + arr[0].en}</td>
// </tr>`
// oTbody.innerHTML += `<tr>
// <td>${arr[1].id}</td>
// <td>${arr[1].cn}</td>
// <td>${arr[1].math}</td>
// <td>${arr[1].en}</td>
// <td>${arr[1].cn + arr[0].math + arr[0].en}</td>
// </tr>`
</script>
</body>
02-分数排序练习2
点按钮之后按顺序排列
<style>
table {
width: 600px;
border-collapse: collapse;
}
tr,
td,
th {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID <input class="btn" type="button" value="排序" /></th>
<th>语文 <input class=&