【备战春招】第3天 前端工程师2022版
课程名称：className的属性介绍和使用、节点操作
课程章节：JS函数与DOM
课程讲师： 未知
课程内容：
1. className的属性介绍和使用
1-1. 较之相对简单的设置和 获取元素class属性值的方法,即className属性
1-2. className:用于设置或者返回元素的class属性值
1-3. 格式:
目标元素.className = "值";
这种方法是通过js来设置标签class的值
1-4. 还可以用这个属性来获取已经设置了的目标标签的class属性值(设置好的类名)
获取目标元素的id:目标元素.getElementById("id名");
通过上面的参数来调用.className属性值
输出上面的函数,既可以得知类名的值为多少
1-5. 一个元素是可以拥有多个类名的,通过className属性,可以获取其所有的类名
1-6. 这个属性可以用于单独对类名进行一系列的设置,然后通过js来修改类名,使其中的设置直接生效,如果恢复原样,就只需要将该属性删除;或者给多个其他属性设置
1-7. 优势:
实现了行为和样式的分离;
减少了代码量;
方便了因为需求不明确需要进行反复修改样式的操作.
1-8 缺点:无论原有元素有几个类名,再通过className来设置class的值时,原先所有的class都会被替换成这个值
1-9 上面那个问题的解决方法:
1)类名较少且已知有那些类名的情况下:在设置className的值时,将原来有的类名值也加上,一些书写在上面
2)类名比较的或者不确定有哪些类名的话,就需要自定义一个函数方法,来实现上面的那个追加className值的效果
2.节点的创建
2-1 创建节点
document.createElement('标签名')；
创建出来的节点是孤儿节点，因为它没有挂载到dom树上，因此不能看见它。
必须继续使用appendChild()或者insertBefore()方法将它挂载到dom树上。
appendChild(孤儿节点)（dom节点最后）追加孤儿节点
insertBefore(孤儿节点，标杆节点)将孤儿节点插入到标杆节点之前
创建节点2步：一创建、二插入
2-2 移动节点
appendChild()或者insertBefore()也能用来移动节点
如果将已经挂载到dom树上的节点成为appendChild()或者insertBefore()的参数，那么节点将会被移动，用法与上面一样，只不过孤儿节点变为指定节点
新（原本）父节点.appendChild(有父节点的子节点)；
新（原本）父节点.insertBefore(有父节点的子节点，新（原本）父节点的标杆子节点)；
这意味着一个节点不能同时位于dom树的两个位置。
2-3 删除节点
removeChild()删除节点
父节点.removeChild(要删除的子节点)；
节点不能主动删除自己，必须由父节点删除它。
2-4 克隆节点
cloneNode()克隆节点，克隆出来的节点是孤儿节点。也需要插入到dom树上才能看见。
var 孤儿节点 = 老节点.cloneNode();
var 孤儿节点 = 老节点.cloneNode(true);
cloneNode(true)中参数是一个bool，表示是否采用深度克隆，如果为true，则是深克隆，该节点的所有后代节点也会被克隆；为false，则是只克隆该节点本身。
<style>
td{
width: 80px;
height: 30px;
border: 1px solid #000;
}
</style>
</head>
<body>
<table id="mytable"></table>
<script>
// 请创建99乘法表
var mytable=document.getElementById('mytable');
for(var i=1;i<=9;i++){
var tr=document.createElement('tr');
for(var j=1;j<=i;j++){
// 创建列元素
var td=document.createElement('td');
// 设置元素内容
td.innerText=j+'*'+i+'='+(i*j);
tr.appendChild(td);
}
mytable.appendChild(tr);
}
</script> <style>
td{
width: 30px;
height: 20px;
border: 1px solid #000;
margin: 0;
}
</style>
</head>
<body>
<table id="mytable"></table>
<script>
// 请动态创建一个20行，12列的表格
var mytable=document.getElementById('mytable');
for(var i=0;i<20;i++){
var tr=document.createElement('tr');
for(var j=0;j<12;j++){
var td=document.createElement('td');
tr.appendChild(td);
}
mytable.appendChild(tr);
}
</script>
</body>
课程收获：
复习课程感觉速度会稍微快点，但是记笔记很费时间，不记又忘得差不多了，继续加油吧，希望每天能多抽点时间来学习就好了，总觉得时间不够用，明天继续加油
共同学习，写下你的评论
评论加载中...
作者其他优质文章
