宁波专业网站搭建地址,网站几几年做的怎么查,室内设计学校排名,用html5做的网站的原代码文章目录 一、DOM介绍二、节点选择器三、属性操作四、样式操作五、尺寸类属性的快速获取六、标签操作八、练习 一、DOM介绍
DOM#xff1a;文档对象模型#xff0c;document#xff0c;提供了网页的相关操作。 document是window的子对象之一#xff0c;但是DOM不属于BOM D… 文章目录 一、DOM介绍二、节点选择器三、属性操作四、样式操作五、尺寸类属性的快速获取六、标签操作八、练习 一、DOM介绍
DOM文档对象模型document提供了网页的相关操作。 document是window的子对象之一但是DOM不属于BOM DOM的文档结构是由众多成份组成的一个树状关系模型在这个关系模型中的任何一个成份都是节点每一个节点的数据类型都是对象 元素节点属性节点文本节点注释节点根节点
操作流程选择器-属性样式内容元素
二、节点选择器
元素节点选择器 document.getElementById(id名)document.getElementsByClassName(class名)document.getElementsByTagName(tag名)document.querySelector(css选择器)document.querySelectorAll(css选择器)父元素.children父元素.firstElementChild父元素.lastElementChild子元素.parentNode元素.previousElementSibling元素.nextElementSiblingdocument.documentElementdocument.headdocument.bodydocument.formsdocument.forms[0].elements注意选择到的元素是单个还是多个 其他节点选择器了解 父元素.childNodes父元素.firstChild父元素.firstChild元素.previousSibling元素.nextSibling元素.attributesdocument 节点过滤 节点.nodeType节点.nodeName节点.nodeValue
三、属性操作
html属性写在标签上的属性 html属性语法div 属性名属性值/div操作语法 自定义 获取元素.getAttribute(属性名)设置元素.setAttribute(属性名,属性值)删除元素.removeAttribute(属性名) 内置 对象语法元素.xxxAttribute()系列 js属性没有写在标签上的属性 内置或自定义都可以直接使用对象的操作语法进行操作 一些内置属性 样式属性元素.styleclass属性元素.classNameclassList属性元素.classList数组形式 添加class元素.classList.add(class名)删除class元素.classList.remove(class名)切换class元素.classList.toggle(class名) 内容属性元素.innerHTML 可以解析标签 内容属性元素.innerText 不可以解析标签 表单控件内容元素.value 表单控件的值 HTML5新增的自定义属性元素.dataset.属性名 对象类型记录了当前元素身上所有的 data- 开头的自定义属性可以使用对象语法进行操作
四、样式操作
设置 行内样式操作 语法元素.style.css属性名 css属性值 获取 非行内样式操作 正常浏览器的语法getComputedStyle(元素).css属性名IE低版本浏览器的语法元素.currentStyle.css属性名 解决兼容
function getStyle(ele, attr){if( ele.currentStyle ){return ele.currentStyle[attr];}else{return getComputedStyle(ele)[attr];}
}五、尺寸类属性的快速获取
元素.clientWidth/Height cont padding 元素.offsetWidth/Height cont padding border 元素.scrollWidth/Height cont padding 可滚动的尺寸 元素.offsetLeft/Top 相对于包含块偏移的距离 元素.scrollLeft/Top 滚走了的距离可设置 补充元素.offsetParent 获取元素的偏移量参考父级包含块一个元素 绝对定位 的时候它是根据谁来进行定位的那么这个元素的偏移量参考父级就是谁
六、标签操作
创建var ele document.createElement(标签名) 插入节点父元素.appendChild( ele ); 删除 元素.remove()父元素.removeChild(子元素) 修改 元素.outerHTML span 原标签内容 /span 替换 父元素.replaceChild(新节点, 旧节点) 克隆 元素.cloneNode(布尔) 为true时表示克隆所有后代节点 获取选择器补充 创建文本节点document.createTextNode(要写的文本内容)插入到指定节点之前父元素.insertBefore(新节点, 基准节点);
八、练习
选项卡切换使用htmlcssjs模拟input的placeholder使用htmlcssjs模拟alert弹出框功能使用htmlcssjs模拟checkbox复选框使用htmlcssjs模拟radio单选框密码强度 数字字母特殊字符任意一种弱任意两种中三种强 模拟聊天对话框瀑布流布局
