DOM介绍
-
DOM：文档对象模型
提供一些操作文档的属性和方法
操作元素节点的属性和方法 -
获取元素的方法：
【1】根据id名来获取 document.getElementById(‘id名’)
返回值：直接就是获取的元素
【2】根据class名来获取 document.getElementsByClassName()
返回值：是一个伪数组，需要通过索引的形式 获取里面的元素
【3】根据标签名来获取 document.getElementsByTagName()
返回值：是一个伪数组，需要通过索引的形式 获取里面的元素
【4】document.querySelector(’.class名 || #id名 || 标签名 || .box span’)
返回值：获取的是第一个满足条件的元素
【5】document.querySelectorAll(‘选择器’)
返回值：以伪数组的形式返回所有满足条件的元素使用这种方法获取的元素集合 是可以使用forEach的方法的
操作元素的属性
-
innerText 只获取文本内容，设置的时候内容有标签的时候 也不会当成标签去解析，直接当成内容显示
-
innerHTML 获取标签所有的内容（子标签也会被获取出来），设置的时候，有标签的时候也会当成标签解析
-
元素的属性分为两种：
【1】dom属性，通过console.dir（）查看dom对象，在dom对象中存在属性称之为dom属性，就是可以通过 . 的形式获取或者设置这个属性的值
【2】标签属性。直接存在标签上— 获取或者设置标签中的属性：
【1】获取属性的属性值：getAttribute（“属性名”）
【2】设置标签属性：setAttribute（“属性”，“属性值”）
【3】删除标签属性：removeAttribute（“属性”）列表页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
ul,
li {
list-style: none;
}
ul {
display: flex;
border: 1px solid red;
justify-content: space-evenly;
padding: 10px 0;
}
ul li {
width: 24%;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0;
cursor: pointer;
}
ul li img {
width: 90%;
}
ul li p {
width: 90%;
margin: 5px;
}
ul li .price {
color: #f40;
}
ul li .name {
color: #3d3d3d;
font-size: 12px;
}
ul li .tip {
position: relative;
}
ul li .tip a {
float: left;
font-size: 12px;
}
ul li .tip span {
float: right;
font-size: 14px;
}
</style>
</head>
<body>
<ul id="goods">
<!-- <li data-id="001" class="goods1">
<img src="images/g1.jpg" />
<p>姓名：阿联酋美女1号</p>
<p>价格：198</p>
<p>年龄：18</p>
</li> -->
</ul>
<script>
// 这就是数据库的商品列表
var meinv = [
{
id: 1,
url: "images/1.webp",
name:
"民族风女装丽江旅游连帽开衫外套绣花薄款长款女夏季红色防晒衫夏",
price: 1998,
shopkeeper: "陌纤依旗舰店",
addrss: "广东 深圳",
},
{
id: 2,
url: "images/2.webp",
name:
"七格格洋气雪纺小衫2020夏季新款女装宽松韩版一字肩时尚短袖上衣",
price: 98,
shopkeeper: "紫陌悠旗舰店",
addrss: "浙江 杭州",
},
{
id: 3,
url: "images/3.webp",
name:
"【新品】乐町气质半身裙2020夏季新款女装气质简约PU皮半身裙",
price: 998,
shopkeeper: "盈璐诗旗舰店",
addrss: "广东 广州",
},
{
id: 66,
url: "images/4.webp",
name:
"冷淡风女装高级感网纱仙女泫雅风裙子ins连衣裙女夏吊带法式长裙",
price: 129,
shopkeeper: "简缇姿旗舰店",
addrss: "广东 东莞",
},
];
/*
【1】根据商品数据 渲染结构（把商品显示在页面）
【2】点击某一个商品的时候 跳转到详情页
【3】需要把当前点击的这个商品的id传递给详情页
*/
var goods = document.querySelector("#goods");
var str = "";
meinv.forEach(function (item) {
// 因为点击的时候需要获取 商品的id，所以把id添加到结构中的一个属性上
str += `<li data_id="${item.id}" class="goods1">
<img src="${item.url}" />
<p class="price">￥${item.price}</p>
<p class="name">${item.name}</p>
<p class="tip">
<a href="#">${item.shopkeeper}</a>
<span>${item.addrss}</span>
</p>
</li>`;
});
goods.innerHTML = str;
// 获取动态生成的元素 ，一定要在生成之后去获取
var li = document.querySelectorAll("#goods li");
li.forEach(function (item, index) {
item.onclick = function () {
// 怎么样才能获取到当前点击的这个元素的id名
var id = this.getAttribute("data_id");
// 把当前点击的这个商品的eid传递给详情页
location.href = "04.详情页.html?id=" + id;
};
});
</script>
</body>
</html>
详情页：点击列表页每项< li >在详情页出现对应的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var meinv = [{
id: 1,
url: "images/1.webp",
name: "民族风女装丽江旅游连帽开衫外套绣花薄款长款女夏季红色防晒衫夏",
price: 1998,
shopkeeper: "陌纤依旗舰店",
addrss: "广东 深圳",
},
{
id: 2,
url: "images/2.webp",
name: "七格格洋气雪纺小衫2020夏季新款女装宽松韩版一字肩时尚短袖上衣",
price: 98,
shopkeeper: "紫陌悠旗舰店",
addrss: "浙江 杭州",
},
{
id: 3,
url: "images/3.webp",
name: "【新品】乐町气质半身裙2020夏季新款女装气质简约PU皮半身裙",
price: 998,
shopkeeper: "盈璐诗旗舰店",
addrss: "广东 广州",
},
{
id: 66,
url: "images/4.webp",
name: "冷淡风女装高级感网纱仙女泫雅风裙子ins连衣裙女夏吊带法式长裙",
price: 129,
shopkeeper: "简缇姿旗舰店",
addrss: "广东 东莞",
},
];
var box = document.querySelector("#box")
window.onload = function () {
/*
【1】获取 列表页传递过来的id
【2】根据id 去数据库中找到对应商品
【3】把商品显示到页面中
*/
//当没有传递参数的时候 就应该回到列表页（不显示详情页）
if (!location.search) {
location.href = "./03.列表页.html";
return;
}
// 获取url地址中的参数的值
var id = location.search.substring(1).split("=")[1];
// 根据id值过滤出对应的数据
var res = meinv.filter(function (item) {
return item.id == id;
});
// console.log(res);
// 数据渲染
str = `<li data_id="${ res[0].id}" class="goods1">
<img src="${ res[0].url}" />
<p class="price">￥${res[0].price}</p>
<p class="name">${res[0].name}</p>
<p class="tip">
<a href="#">${res[0].shopkeeper}</a>
<span>${res[0].addrss}</span>
</p>
</li>`
console.log(str);
box.innerHTML = str;
};
</script>
</body>
</html>
获取特殊的标签
var body = document.body;
var head = document.head;
var title = document.title;
// 根据标签name属性的属性值来获取元素
// 返回值：返回一个节点集合
节点的分类
-
节点分类
【1】元素节点
【2】文档节点
【3】注释节点
【4】属性节点 -
判断节点类型：nodeType
【1】返回值为 1 的时候 表示元素节点
【2】返回值为 2 的时候 表示属性节点
【3】返回值为 3 的时候 表示文本节点
【4】返回值为 8 的时候，表示注释节点
关系节点的获取
-
根据父元素 去获取子元素
-
根据子元素 去获取父元素
-
根据兄弟元素 去获取兄弟元素
【1】childNodes 获取元素下所有的子节点（包括元素 文本和注释节点） 【2】children 获取的就是元素的下所有的元素节点 【3】firstChild 获取元素的的第一个子节点（包括元素 文本和注释节点） 【4】firstElementChild 获取第一个元素节点 【5】lastChild 获取最后一个子节点（包括元素 文本和注释节点） 【6】lastElementChild 获取最后一个元素节点 【7】parentElement 通过子元素获取父元素（只能获取到上一级的父元素） 【8】parentNode 通过子元素获取父元素（只能获取到上一级的父元素） 【9】previousSibling 获取元素的上一个兄弟节点（元素，文本，注释） 【10】previousElementSibling 获取 上一个元素的兄弟节点 【11】nextSibling 获取下一个兄弟节点元素，文本，注释 【12】nextElementSibling 获取下一个元素的兄弟节点
操作dom元素
-
其实就是对dom元素的增删改查
【查】：获取元素
【增】：增加一个元素【1】创建元素：document.createElement("p") 【2】在创建这个元素写入页面中已经存在的一个元素 父元素.appendChild(子元素) 把这个子元素追加到父元素中 父元素.insertBefore (创建的元素a，页面中存在的元素b)把a元素放在b元素的前面【删】：删除已经存在的元素
父元素.removeChild(子元素) 把父元素中的这个子元素删除 元素.remove（）把当前这个元素删除【改】：替换元素
replaceChild（a，b）用a元素替代b元素【克隆元素】：cloneNode（）
当这个函数没有参数的时候，只能克隆元素 不会克隆元素的内容 如果要克隆元素内容 需要传递一个参数，参数为true【判断子节点】：hasChildNodes（）
返回值：如果有子节点就返回true，否则返回false
使用创建节点的形式生成任意表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
border: 1px solid #ccc;
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table tr {
height: 30px;
}
table tr td {
border: 1px solid #cccc;
}
</style>
</head>
<body>
行：
<input type="text" id="row" />
列：
<input type="text" id="col" />
<button id="btn">生成</button>
<table>
<tbody id="content">
<!-- <tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
<script>
// 封装一个函数（获取元素的函数）
function getEle(str) {
return document.querySelector(str);
}
//先获取需要用到的元素
var row = getEle("#row");
var col = getEle("#col");
var btn = getEle("#btn");
var content = getEle("#content");
btn.onclick = function () {
// 先把tbody的内容清空
content.innerHTML = "";
//获取行和列数 进行循环渲染
var r = row.value * 1;
var c = col.value * 1;
// 循环嵌套：
// 外层循环 生成的是行
// 内层循环 生成的是列
for (var i = 0; i < r; i++) {
// 外层循环循环一次 就应该生成一个tr
var tr = document.createElement("tr");
for (var j = 0; j < c; j++) {
var td = document.createElement("td");
td.innerHTML = `单元格${i}${j}`;
tr.appendChild(td);
}
// 把tr 放入 tbody
content.appendChild(tr);
}
// row.value = '';
// col.value = '';
// 赋值运算是从右到左执行
// 先把 ''给到 col.value
// 再把col.value的值 给 row.value
row.value = col.value = "";
};
</script>
</body>
</html>
根据数据生成表单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
form {
width: 100%;
height: auto;
font-size: 16px;
background-color: aqua;
}
</style>
</head>
<body>
<form action="" id="form"></form>
<script>
var arr = [{
label: "用户名",
name: "username",
type: "text",
},
{
label: "密码",
name: "password",
type: "password",
},
{
label: "性别",
name: "gender",
type: "select",
value: ["男", "女", "不男", "不女", "Gay", "妖王"],
},
{
label: "爱好",
name: "hobby",
type: "checkbox",
value: [
"篮球",
"足球",
"羽毛球",
"兵乓球",
"爬山",
"购物",
"旅游",
"看美女",
],
},
{
label: "是否已婚",
name: "married",
type: "radio",
value: ["已婚", "未婚"],
},
{
label: "简介",
name: "resume",
type: "textarea",
},
];
/*
【1】循环数组 数组 的长度为多少 ，创建多少个 p标签 和 label 和存放内容标签
【2】根据 数组中对象的信息 来创建不同的标签
*/
var form = document.querySelector("#form");
arr.forEach(function (item) {
var p = document.createElement("p");
var label = document.createElement("label");
p.appendChild(label);
var content;
// 判断对象中的type
// 如果type的类型为 text password 需要给content 赋值一个 input元素
// type=select content 赋值一个 select 标签
switch (item.type) {
case "text":
case "password":
content = document.createElement("input");
content.setAttribute("type", item.type);
content.setAttribute("name", item.name);
content.setAttribute("id", item.name);
label.innerHTML = item.label + ":";
p.appendChild(content);
break;
case "select":
content = document.createElement("select");
content.setAttribute("name", item.name);
content.setAttribute("id", item.name);
label.innerHTML = item.label + ":";
// option 根据item的value属性来决定生成option数量
item.value.forEach(function (value) {
var option = document.createElement("option");
option.innerHTML = value;
option.setAttribute("value", value);
content.appendChild(option);
});
p.appendChild(content);
break;
case "checkbox":
case "radio":
content = document.createElement("span");
label.innerHTML = item.label + ":";
item.value.forEach(function (value) {
var input = document.createElement("input");
var txt = document.createElement("label");
input.setAttribute("type", item.type);
input.setAttribute("name", item.name);
txt.innerHTML = value;
content.appendChild(input);
content.appendChild(txt);
});
p.appendChild(content);
break;
case "textarea":
content = document.createElement("textarea");
label.innerHTML = item.label + ":";
p.appendChild(content);
}
form.appendChild(p);
});
</script>
</body>
</html>
生成可编辑表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 1000px;
border: 1px solid #ccc;
border-spacing: 0px;
border-collapse: collapse;
margin-top: 10px;
}
table tr {
height: 40px;
}
table tr td,
table tr th {
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
姓名：
<input type="text" id="userName">
年龄：
<input type="text" id="age">
电话：
<input type="text" name="" id="tel">
QQ号：
<input type="text" name="" id="qq">
<button id="btn">添加</button>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th>QQ号</th>
<th>操作</th>
</tr>
</thead>
<tbody id="content"></tbody>
</table>
<script>
function getEle(str) {
return document.querySelector(str);
}
var userName = getEle("#userName");
var age = getEle("#age");
var tel = getEle("#tel");
var qq = getEle("#qq");
var btn = getEle("#btn");
var content = getEle("#content");
var index=0;
btn.οnclick=function(){
var str=`<tr>
<td>${++index}</td>
<td contenteditable="true">${userName.value}</td>
<td contenteditable="true">${age.value}</td>
<td contenteditable="true">${tel.value}</td>
<td contenteditable="true">${qq.value}</td>
<td>
<button class="del">删除</button>
</td> `;
content.innerHTML+=str;
userName.value=age.value=tel.value=qq.value="";
var del=document.querySelectorAll(".del");
del.forEach(function(item){
item.οnclick=function(){
var res=confirm("您确定要删除吗？")
if(res){
this.parentElement.parentElement.remove();
}
}
})
}
</script>
</body>
</html>
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
