商城网站建设优化推广,wordpress文件类型不支持,万网如何上传网站,站群推广DOM概述
官方定义#xff1a;
DOM是W3C制定的一个规范(标准)#xff0c;(Document Object Model#xff0c;文档对象模型)#xff0c;是提供了访问和操作网页中各元素的方法#xff0c;让程序可以动态的修改或改变网页元素的内容、样式、结构。
DOM是W3C制定的一个规范…DOM概述
官方定义
DOM是W3C制定的一个规范(标准)(Document Object Model文档对象模型)是提供了访问和操作网页中各元素的方法让程序可以动态的修改或改变网页元素的内容、样式、结构。
DOM是W3C制定的一个规范(标准)而这个规范在浏览器中以对象的形式得以实现。
在 1998 年W3C 发布了第一级的 DOM 规范所有的浏览器都执行了这个标准因此DOM 的兼容性问题也几乎难觅踪影了
提供了访问HTML文档的方法, 允许开发者通过JS对HTML文档进行增, 删, 改, 查
DOM结构倒树形结构
HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)树状结构叫节点树结构树反映了各HTML元素之间的层次关系DOM就通过这种树结构的层次关系来定位、访问与控制文档中各元素及其内容 DOM按其内容可分为5个部分 核心DOM可以同时操作HTML和XML两种文档的公共的属性和方法。 XMLDOM针对XML操作的接口也是一些属性和方法 HTML DOMHTML专用接口也是一些属性和方法 DOM事件模型定义DOM能够响应的事件.比如onclick、onload、onchange
DOM的结构
HTML DOM 将 HTML 文档视作树结构。结构图中的每一项称为节点(Node)树状结构叫节点树.结构树反映了各HTML元素之间的层次关系。DOM就通过这种树结构的层次关系来定位、访问与控制文档中各元素及其内容。
DOM节点
根据 DOMHTML 文档中的每个成分都是一个节点HTML文档的节点类型有5个 整个文档是一个文档节点 它对应的对象是document对象 9 每个 HTML 标签是一个元素节点 1 divnull 每一个 HTML 属性是一个属性节点 2 属性属性值 包含在 HTML 元素中的文本是文本节点 它下面不能再有其它子节点 3 #test文本 注释属于注释节点 8
a href”http://www.baidu.com”百度/a
节点对象.nodeType
节点对象.nodeName
节点关系
节点彼此间都存在关系。父parent、子child和同胞sibling等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞兄弟或姐妹。 除文档节点之外的每个节点都有父节点(parentNode)。 父节点(parentNode)当前节点的上一级元素 大部分元素节点都有子节点。 子节点(childNode)当前节点的下一级元素1层 当节点分享同一个父节点时它们就是同辈同级节点。 节点也可以拥有后代后代指某个节点的所有子节点或者这些子节点的子节点 节点也可以拥有先辈。先辈是某个节点的父节点或者父节点的父节点
只要知道一个节点 按关系找到其它节点
节点信息
节点信息。每个节点都拥有包含着关于节点某些信息的属性。这些属性是nodeName节点名称 nodeValue节点值nodeType节点类型。
节点名称 obj.nodeName nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 是属性的名称 文本节点的 nodeName 永远是 #text 元素节点的文本内容
节点值 obj.nodeValue 元素节点的 nodeValue 是 null 文本节点的 nodeValue 是 文本自身 属性节点的 nodeValue 是 属性的值
节点类型 obj.nodeType
DOM中定义了12种节点类型有些类型是XML专有的与HTML相关的节点类型如下图所示。 nodeType 是只读的 nodeType 属性规定节点的类型 元素节点的 nodeType 是 1 属性节点的 nodeType 是 2 文本节点的 nodeType 是 3
获取节点对象
获取节点
在访问节点树中节点时起点是document对象。
获取元素节点
document.getElementById(ID)
document.getElementsByTagName(标签名称)
document.getElementsByClassName(类名);
document.getElementsByName(name属性值)
document.querySelector();
document.querySelectorAll();
document.getElementById(ID).getElementsByTagName(标签名称);
// 获取所有奇数选择器
var sel document.querySelectorAll(ul li:nth-child(odd));
for(var i0; isel.length;i){sel[i].style.backgroundColor red;
}
封装 - 获取元素的方式
function $(selector) {return document.querySelector(selector)
} 获取属性 属性节点包括clsaaidstylename等 obj.attributes[0|id]; //获取对象的所有的属性的集合 obj.getAttribute(“id”); //获取指定属性名的属性值 obj.getAttributeNode(“id”) //从当前元素中通过名称获取属性节点
获取文本节点
var objdocument.getElementById(mydiv);
for(var i0;iobj.childNodes.length;i){if(obj.childNodes[i].nodeType3){document.write(obj.childNodes[i].nodeTypebr);}
}
//注意页面上的回车转行也算一个文本节点 取其他节点 获取父、子和同胞节点对象 节点对象.parentNode //父节点 节点对象.childNodes //获取子节点 节点对象.children //获取元素中的子元素对象不要文本 节点对象.firstChild //获取第一个子节点 节点对象.firstElementChild //获取第一个子节点不要文本 节点对象.lastChild //获取最后一个子节点 节点对象.lastElementChild //获取最后一个子节点不要文本 节点对象.previousSibling //获取前一个兄弟元素节点 节点对象.previousElementSibling //获取上一个兄弟元素节点只包含元素节点不包含文本节点 节点对象.nextSibling //获取下一个兄弟元素 节点对象.nextElementSibling // 获取下一个兄弟元素节点只包含元素节点不包含文本节点 节点对象.elements // 返回包含表单中所有元素的数组
操作节点对象-改变节点
获取及设置元素节点对象属性 获取元素对象属性 方法1元素对象.属性名 [class需要使用className]仅限于当前标签存在的属性自定义不可以使用 方法2元素对象.getAttribute(属性名) 方法3元素对象.dataset.index【dataset是H5新增的属性】 设置元素对象属性 方法1元素对象.属性名属性值 方法2元素对象.setAttribute(属性名,属性值) 方法3元素对象.dataset.index 01 通过dataSet新增自定义属性一般以data-开头的属性名为程序员之间默认的格式认为这是一个自定义属性 元素对象.dataset.defaultColor 移除元素对象属性 removeAttribute(name) delete 元素对象.dataset.XXX
案例获取属性值
div idid1 classactive div1 stylecolor:redhello/div
scriptvar div document.querySelector(#id1);console.log(div.id);console.log(div.className);console.log(div.classList); // 可读div.classList.add(show);// 添加div.classList.remove(div1);// 删除console.log(div.style);
/script 案例点击按钮 设置data-XX 或者 获取data-XX的数据 var oLabel document.querySelectorAll(.content label);
var num 1;
for(var i0;ioLabel.length;i){oLabel[i].onclick function(){this.dataset.index num; // 设置this.setAttribute(data-index,num); // 设置console.log(this.dataset.msg); // 获取data-msg}
}
获取及设置元素节点对象内容 元素对象.innerHTML从开始标签-结束标签包括html标签 元素对象.outerHTMLinnerHTML的全部和标签本身 元素对象.innerText只获取元素总的文本内容 表单元素对象.value
节点对象操作
创建节点
方法描述createElement(tagName)创建标记名tagName的Element节点。Element节点可以包含文本子节点和属性子节点 例如node_h1document.createElement(“h1”)createTextNode(text)创建包含文本text的文本节点返回得到的节点如node_textdocument.createTextNode(“hello”)appendChild(node)向当前节点添加子节点子节点被添加在子节点列表的尾部。例如node_h1.appendChild(node_text)insertBefore(new,current)在current节点前插入new节点。 parentNode.insertBefore(new,current)
删除节点对象
父节点对象.removeChild(子节点对象)
节点对象.remove() //移除当前元素
替换节点对象
父节点对象.replaceChild(新节点,旧节点)
克隆节点
element.cloneNode(true)
案例1评论功能 考使用createElement和使用innerHTML在页面上添加元素有什么区别
var box document.getElementById(box);
// 1. 使用createElement创建节点的方式
for(var i0; i100;i){var a document.createElement(a);box.appendChild(a);
}
// 2. 使用innerHTML 字符串拼接的方式
for(var i0; i100;i){var a ahello/a;box.innerHTML a;
}
// 3. 使用innerHTML 数组的方式
var arr [];
for(var i0; i100;i){arr.push(ahello/a);box.innerHTML arr.join();
} 总结 innerHTML创建多个元素效率更高不要使用拼接字符串使用数组拼接结构稍微复杂 createElement 创建多个元素效率稍微低一点但是结构更清晰 innerHTML 的效率比 createElement 高 DOM元素尺寸
获取当前元素的宽度和高度,定位的left和top
属性描述box.clientWidth元素的宽度box.clientHeight元素的高度box.scrollWidthbox.scrollHeight这组属性可以获取没有滚动条的情况下,元素内容的总高度;box.offsetLeftbox.offsetTop偏移值这组属性可以获取当前元素边框相对于父元素边框的位置
案例放大镜效果 style.content{width: 1200px;height: 800px;margin: 0 auto;}.shop{float: left;width: 400px;height: 470px;}.box{width: 300px;height: 300px;background: url(./bg.png);}.smallImg{display: flex;justify-content: space-between;}.showimg{position: relative;width: 400px;height: 400px;margin-bottom: 10px;}.mask{width: 200px;height: 200px;background:url(./bg.png);position: absolute;top: 0;left: 0;}.bigImg{position: absolute;width: 400px;height: 400px;top: 0;left: 410px;overflow: hidden;}.bigImg img{position: absolute;}
/style
/head
bodydiv classcontentdiv classshopdiv classshowimgimg src./big.jpg altdiv classmask/divdiv classbigImgimg idbigs src./varybig.jpeg alt/div/divdiv classsmallImgimg src./small1.jpg altimg src./small2.jpg altimg src./small5.jpg altimg src./small2.jpg altimg src./small1.jpg altimg src./small2.jpg alt/div/div/div
/body
scriptvar showimg document.getElementsByClassName(showimg)[0];var mask document.getElementsByClassName(mask)[0];var bigImg document.getElementsByClassName(bigImg)[0];var bigs document.getElementById(bigs);showimg.onmousemove function(event){// 1. 获取鼠标的xy值var x event.pageX - this.offsetLeft;var y event.pageY - this.offsetTop;// 2. 把获取到的xy添加给遮罩层// mask.style.left x- mask.offsetWidth/2 px;// mask.style.top y- mask.offsetHeight/2 px;// 3. 判断遮罩层的边界var maskX x - mask.offsetWidth/2;var maskY y - mask.offsetHeight/2;if(maskX 0){maskX 0;}else if(maskX showimg.offsetWidth - mask.offsetWidth){maskX showimg.offsetWidth - mask.offsetWidth;}if(maskY 0){maskY 0;}else if(maskY showimg.offsetHeight - mask.offsetHeight){maskY showimg.offsetHeight - mask.offsetHeight;}mask.style.left maskXpx;mask.style.top maskYpx;/*** 4. 计算小图和大图之间的比例关系* 遮罩层100px* 大图窗口400px* 遮挡层移动距离/遮挡层最大移动距离 大图片移动距离/大图片最大移动距离* bx当前位置 800*sx当前位置/400* 大图片移动距离 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距离*/ // 大图片最大移动距离var bigMax bigs.offsetWidth - bigImg.offsetWidth;var bigMax bigs.offsetWidth - bigImg.offsetWidth;// 大图片的移动距离 x yvar bigx maskX * bigMax / (showimg.offsetWidth - mask.offsetWidth);var bigy maskY * bigMax / (showimg.offsetHeight - mask.offsetHeight);bigs.style.left -bigxpx;bigs.style.top -bigypx;}
/script DOM元素的其他获取方式
document文档对象的属性OM
document对象拥有大量的属性这些属性主要用于描述HTML文档中的标题、URL以及HTML文档中的图片、超链接、表单元素等。
属性名说明anchors该属性返回一个数组代表当前文档中的锚 //anchors.lengthformsform表单对象的数组imagesimage对象的数组linkslink对象的数组lastModified返回当前文档的最后一次修改时间title设置或返回当前文档的标题
常用元素节点对象
document.documentElement html
document.head head
document.title title
document.body body
常用元素节点对象集合
document.all
document.forms
document.images
document.links
document.anchors
遍历节点对象集合
for(var i0;i节点对象集合.length;i){ 节点对象集合[i]
} for(i in 节点对象集合){ 节点对象集合[i]
}
状态码-status
1XX消息: 这一类型的状态码代表请求已被接受需要继续处理。
2XX成功: 200请求已成功
3XX重定向: 301被请求的资源已永久移动到新位置。
4XX请求错误: 404 Not Found。 请求失败请求所希望得到的资源未被在服务器上发现
5XX 服务器错误
端口号 客户端80http / 443https 数据库3306 ftp21
url构成
https://www.baidu.com:80/index/index.html?page1num10 http / https 协议 :80 端口号80默认端口号 index文件夹的名称 index.html被访问的文件的名称 ?后面传递的参数get传參;多个参数用连接 www.baidu.com域名
