HML DOM操作
文档对象模型（Document Object Model，简称DOM）。
DOM定义
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
DOM树结点语义扩展
为了增加DOM树结点与页面主题信息相关程度的语义信息，计算结点内容的重要度，将HTML标签的类别(Category)、非链接文字数(WordNum)、超链接数(LinkNum)、属性集(Attibution)和影响度因子(Influence)等属性添加到结点中，扩展其语义。HTML标签依据其作用可分为5类:
-
描述标题及页面概要信息的标签:如〈title〉、〈meta〉等。
-
规划网页布局的标签:如〈table〉、〈tr〉、〈td〉、〈p〉、〈div〉等，其作用是描述网页内容的布局结构。
-
描述显示特点的标签:如〈b〉、〈I〉、〈strong〉、〈h1〉-〈h6〉等，其作用是强调重点内容，引起人们注意。
-
超链接相关的标签，表示网页间的内容相关性信息。
-
其他标签，如设置图像的标签〈img〉，在文本提取时将忽略这类标签。
一、DOM 操作
（1）获取元素
document.querySelector('div') //选择元素（2）对元素进行操作（设置其属性或调用其方法）
document.append('ul') //添加元素
document.appendChild('li') //添加子元素（3）动态创建元素
document.createElement('div') //创建元素（4）事件（什么时机做相应的操作）
document.querySelector('div').innerText=''
document.querySelector('div').innerHTML=''二、DOM操作核心代码
代码如下（示例）：
/**
* DOMOBJ DOM描述
* root 页面中的DOM位置 (可选)
*
* */
function createDOM(DOMOBJ, root) {
let d = document.createElement(DOMOBJ.el);
for (const key in DOMOBJ) {
d[key] = DOMOBJ[key];
}
for (const key in DOMOBJ.style) {
d.style[key] = DOMOBJ.style[key];
}
if (DOMOBJ.elChildren && typeof (DOMOBJ.elChildren) == 'object') {
if (Array.isArray(DOMOBJ.elChildren)) {
DOMOBJ.elChildren.forEach(element => {
createDOM(element, d);
});
} else {
createDOM(DOMOBJ.elChildren, d);
}
} else {
DOMOBJ.elChildren && console.error('注意数据格式，别瞎传`DOMOBJ.elChildren`属性。');
}
if (root) {
root.appendChild(d);
}
return d;
}
// DOMOBJ 是一个字符串 可行不？ 哒嚒
// DOMOBJ 是一个对象 可行不？ 要不咱俩试试。
// let o = {
// el: 'el',
// src: "xxxxx",
// title: "xxxxxx",
// id: "xxxx",
// }三、轮播图实现代码
代码如下（示例）：
<!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>
.app{
width: 820px;
height: 390px;
}
.app .top{
height: 340px;
position: relative;
overflow: hidden;
}
.app .top .img-content{
display: flex;
position:absolute;
}
.app .top .img-content img{
width: 820px;
}
.bottom{
height: 50px;
display: flex;
}
.bottom span{
width: calc(100% / 5);
background-color: #525252;
color:darkcyan;
text-align: center;
line-height: 50px;
font-size: 20px;
cursor: pointer;
}
.left,.right{
height: 50px;
width: 30px;
font-size: 20px;
color: #ffffff;
line-height: 50px;
text-align: center;
position:absolute;
left: 0;
bottom: 50%;
background-color: rgba(0, 0, 0, .6);
cursor: pointer;
}
.right{
left: auto;
right: 0
}
.bottom span.active{
background-color: #f2f4f6;
color: #a64942;
}
</style>
</head>
<body>
<div class="app">
<!-- <div class="top">
<div class="img-content">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220812/9e5ad2f0427765b26ec7f39488def8e7.jpeg" alt="">
</div>
<span class="left"> < </span>
<span class="right"> > </span>
</div>
<div class="bottom">
<span>文字</span>
</div> -->
</div>
<script src="./DOM.js"></script>
<script>
let imgls = [
{
img:'https://ossweb-img.qq.com/upload/adw/image/977/20220812/9e5ad2f0427765b26ec7f39488def8e7.jpeg',
title:'小怪兽训练师'
},
{
img:'https://ossweb-img.qq.com/upload/adw/image/977/20220817/d16724a74ab34b093c9c3ae25eae2d6d.jpeg',
title:'时空召唤'
},
{
img:'https://ossweb-img.qq.com/upload/adw/image/977/20220811/e27ec058711d7c80ebcc7143f6e1b26b.jpeg',
title:'浪里五鲨宝典'
},
{
img:'https://ossweb-img.qq.com/upload/adw/image/977/20220722/6e380c555ce2e06ba645d462960bc8f3.jpeg',
title:'星之守护者通行证'
},
{
img:'https://ossweb-img.qq.com/upload/adw/image/977/20220816/7d4d7ae33b1678b15cef76fdc5cd8884.jpeg',
title:'夏日折扣'
}
]
//创建头部图片轮播
createDOM(
{
el:'div',
className:'top',
elChildren:[
{
className: "img-content",
el: 'div',
elChildren: imgls.map((item,i) => {
return {
el: "img",
src: item.img
}
})
},
{el:'span',className:'left',innerText:'<',onclick:() => {lrbtn('left')}},
{el:'span',className:'right',innerText:'>',onclick:() => {lrbtn('right')}}
]
},
document.querySelector('.app')
);
//创建底部按钮
createDOM(
{
el:'div',
className:'bottom',
elChildren:imgls.map((item,i) => {
return {
el:'span',innerText:item.title, onclick: () => { BtnChange(i) }
}
})
},
document.querySelector('.app')
);
//写交互
let iX = 0;
let iXlod;
function lrbtn(lcs){
if(lcs == 'left'){
if(iX - 1 < 0) return run(imgls.length - 1)
run(iX -1)
}
if(lcs == 'right'){
if(iX + 1 > imgls.length - 1) return run(0)
run(iX + 1)
}
}
//底部按钮时间
function BtnChange(i){
console.log(i);
run(i)
}
// 页面变化
function run(i){
iXlod = iX;
iX = i;
// 底部切换
let spans = document.querySelectorAll('.app .bottom>span')
//收回前一个span
spans[iXlod].classList.remove('active');
// 赋予
spans[iX].classList.add('active');
// 上部的图片
document.querySelector('.app .top .img-content').style.left = `${iX * 820 * -1}px`
}
run(0)
</script>
</body>
</html>该处使用的url网络请求的数据。
特征
Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战” [3] （browser wars），双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
DOM分为HTML DOM和XML DOM两种。它们分别定义了访问和操作HTML/XML文档的标准方法，并将对应的文档呈现为带有元素、属性和文本的树结构（节点树），如图3所示： 1）DOM树定义了HTML/XML文档的逻辑结构，给出了一种应用程序访问和处理XML文档的方法。
2）在DOM树中，有一个根节点，所有其他的节点都是根节点的后代。
3) 在应用过程中，基于DOM的HTML/XML分析器将一个HTML/XML文档转换成一棵DOM树，应用程序通过对DOM树的操作，来实现对HTML/XML文档数据的操作。
总结
本节内容模仿英雄联盟轮播图，核心部分自定义一个DOM创建操作类，再次通过此类进行页面渲染，并进行排序和点击事件的实现。
1083
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
