JS_数据渲染_DOM事件

最新推荐文章于 2023-05-16 17:10:09 发布

柠檬养乐多.

最新推荐文章于 2023-05-16 17:10:09 发布

阅读量1.1k

点赞数

文章标签： javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/ysj94s7/article/details/123099105

版权

本文详细介绍了JavaScript中DOM操作，包括获取元素、属性操作、元素操作、创建和删除元素等，并通过分数排序练习展示了数据渲染的实现。此外，还探讨了不同类型的浏览器事件，如鼠标事件、键盘事件、表单事件等，以及事件处理的实例。

摘要由CSDN通过智能技术生成

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>

</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=&

最低0.47元/天解锁文章

柠檬养乐多.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS_数据渲染_DOM事件

01-复习 DOM DOM 获取元素 document.getElementById document.getElementsByClassName document.getELementsByTagName document.querySelector document.querySel...
复制链接

扫一扫