建设银行 企业网站,重庆交通建设监理协会网站,珠海公司做网站,时装网站的建设一、元素的特性attribute
1.元素的属性和特性
前面我们已经学习了如何获取节点#xff0c;以及节点通常所包含的属性#xff0c;接下来我们来仔细研究元素Element。
我们知道#xff0c;一个元素除了有开始标签、结束标签、内容之外#xff0c;还有很多的属性#xff0…一、元素的特性attribute
1.元素的属性和特性
前面我们已经学习了如何获取节点以及节点通常所包含的属性接下来我们来仔细研究元素Element。
我们知道一个元素除了有开始标签、结束标签、内容之外还有很多的属性attribute
浏览器在解析HTML元素时会将对应的attribute也创建出来放到对应的元素对象上。
比如id、class就是全局的attribute会有对应的id、class属性比如href属性是针对a元素的type、value属性是针对input元素的
接下来我们学习一下如何获取和设置这些属性。
2.attribute的分类
属性attribute的分类
标准的attribute某些attribute属性是标准的比如id、class、href、type、value等非标准的attribute某些attribute属性是自定义的比如abc、age、height等 div classbox idmain namekobe abcdef age18哈哈哈哈/div3.attribute的操作
对于所有的attribute访问都支持如下的方法
elem.hasAttribute(name) — 检查特性是否存在。elem.getAttribute(name) — 获取这个特性值。elem.setAttribute(name, value) — 设置这个特性值。elem.removeAttribute(name) — 移除这个特性。attributesattr对象的集合具有name、value属性
attribute 具备以下特征
它们的名字是大小写不敏感的id 与 ID 相同。它们的值总是字符串类型的。
4.元素的属性property
对于标准的attribute会在DOM对象上创建与其对应的property属性
console.log(boxE1.id,boxEl.className) //box main
console.log(boxEl.abc, boxEl.age, boxEl.height) // undefined...在大多数情况下它们是相互作用的
改变property通过attribute获取的值会随着改变通过attribute操作修改property的值会随着改变 但是input的value修改只能通过attribute的方法
除非特别情况大多数情况下设置、获取attribute推荐使用property的方式
这是因为它默认情况下是有类型的
toggleBtn.onclick function () {checkBoxInput.checked !checkBoxInput.checked;
}5.HTML5的data-*自定义属性
前面我们有学习HTML5的data-*自定义属性那么它们也是可以在dataset属性中获取到的
// data-*
console.log(div2El.dataset);//DOMStringMap
console.log(typeof div2El.dataset);//object
console.log(div2El.dataset.name, div2El.dataset.age);二、元素的class、style
1.JavaScript动态修改样式
有时候我们会通过JavaScript来动态修改样式这个时候我们有两个选择
选择一在CSS中编写好对应的样式动态的添加class选择二动态的修改style属性
开发中如何选择呢
在大多数情况下如果可以动态修改class完成某个功能更推荐使用动态class如果对于某些情况无法通过动态修改class比如精准修改某个css属性的值那么就可以修改style属性
接下来我们对于两种方式分别来进行学习。
2.元素的className和classList
元素的class attribute对应的property并非叫class而是className
这是因为JavaScript早期是不允许使用class这种关键字来作为对象的属性所以DOM规范使用了className虽然现在JavaScript已经没有这样的限制但是并不推荐并且依然在使用className这个名称
我们可以对className进行赋值它会替换整个类中的字符串。
var boxE1 document.querySelector(.box);
boxE1.className why abc;如果我们需要添加或者移除单个的class那么可以使用classList属性。
elem.classList 是一个特殊的对象
elem.classList.add(class) 添加一个类elem.classList.remove(class)添加/移除类。elem.classList.toggle(class) 如果类不存在就添加类存在就移除它。elem.classList.contains(class)检查给定类返回 true/false。
classList是可迭代对象可以通过for of进行遍历。
3.元素的style属性
如果需要单独修改某一个CSS属性那么可以通过style来操作
对于多词multi-word属性使用驼峰式 camelCase
boxEl.style.width 100px;
boxEl.style.height 50px;
boxE1.style.backgroundColor red;如果我们将值设置为空字符串那么会使用CSS的默认样式
boxEl.style.display ;多个样式的写法我们需要使用cssText属性
h1El.style.color blue;
h1El.style.border 1px solid red;
// 会覆盖上面的color和border配置
h1El.style.cssText font-size: 24px;不推荐这种用法因为它会替换整个字符串
// 1.在property中使用的驼峰格式
// console.log(boxEl.style.backgroundColor)// 2.如果将一个属性的值, 设置为空的字符串, 那么是使用默认值
// boxEl.style.display
// boxEl.style.fontSize // 3.设置多个样式
// boxEl.style.fontSize 30px
// boxEl.style.color red
boxEl.style.cssText font-size: 30px; color: red;4.元素style的读取 - getComputedStyle
如果我们需要读取样式
对于内联样式是可以通过style.*的方式读取到的;对于style、css文件中的样式是读取不到的
这个时候我们可以通过getComputedStyle的全局函数来实现
console.log(getComputedStyle(boxEl).fontSize)四、元素的常见操作
1.创建元素
前面我们使用过 document.write 方法写入一个元素
这种方式写起来非常便捷但是对于复杂的内容、元素关系拼接并不方便它是在早期没有DOM的时候使用的方案目前依然被保留了下来
那么目前我们想要插入一个元素通常会按照如下步骤
步骤一创建一个元素步骤二插入元素到DOM的某一个位置
创建元素 document.createElement(tag) // 创建元素
var div1El document.createElement(div);
div1El.textContent 我是div元素;
div1El.style.color red;
div1El.style.fontSize 18px;2.插入元素
插入元素的方式如下
node.append(...nodes or strings) —— 在 node 末尾 插入节点或字符串node.prepend(...nodes or strings) —— 在 node 开头 插入节点或字符串node.before(...nodes or strings) —— 在 node 前面 插入节点或字符串node.after(...nodes or strings) —— 在 node 后面 插入节点或字符串node.replaceWith(...nodes or strings) —— 将 node 替换为给定的节点或字符串。 3.移除和克隆元素
移除元素我们可以调用元素本身的remove方法
如果我们想要复制一个现有的元素可以通过cloneNode方法
可以传入一个Boolean类型的值来决定是否是深度克隆深度克隆会克隆对应元素的子元素否则不会
bodybutton classremove-btn移除box/buttonbutton classclone-btn复制box/buttondiv classboxh2我是标题/h2p我是文本, 哈哈哈哈哈/p/divscript// 1.获取元素var boxEl document.querySelector(.box)var removeBtnEl document.querySelector(.remove-btn)var cloneBtnEl document.querySelector(.clone-btn)// 2.监听removeBtn的点击removeBtnEl.onclick function() {boxEl.remove()}// 3.复制boxvar counter 0cloneBtnEl.onclick function() {var newNode boxEl.cloneNode(true)newNode.children[0].textContent 我是标题 counter// boxEl.after(newNode)document.body.append(newNode)counter}/script/body4.旧的元素操作方法
在很多地方我们也会看到一些旧的操作方法
parentElem.appendChild(node) 在parentElem的父元素最后位置添加一个子元素 parentElem.insertBefore(node, nextSibling) 在parentElem的nextSibling前面插入一个子元素 parentElem.replaceChild(node, oldChild) 在parentElem中新元素替换之前的oldChild元素 parentElem.removeChild(node) 在parentElem中移除某一个元素
5.元素的大小和滚动
clientWidthcontentWithpadding不包含滚动条
clientHeightcontentHeightpadding
clientTopborder-top的宽度
clientLeftborder-left的宽度
offsetWidth元素完整的宽度
offsetHeight元素完整的高度
offsetLeft距离父元素的x
offsetHeight距离父元素的y
scrollHeight整个可滚动的区域高度
scrollTop滚动部分的高度 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {padding: 100px;}.box {width: 100px;height: 100px;padding: 20px;border: 10px solid red;/* box-sizing: border-box; */background-color: orange;overflow: auto;}/style
/head
bodydiv classbox你去过国内最美的地方是哪# 我去过国内最美的地方是新疆喀纳斯。喀纳斯是一个美丽而神秘的地方这里群山环抱森林密布湖水清澈风景奇特。为国家级5A级景区国家地质公园国家森林公园。/divscriptvar boxEl document.querySelector(.box)// 1.获取样式(局限性很强)var boxStyle getComputedStyle(boxEl)console.log(boxStyle.width, boxStyle.height)// 2.获取更多信息console.log(boxEl.clientWidth)console.log(boxEl.clientHeight)console.log(boxEl.clientLeft)console.log(boxEl.clientTop)console.log(boxEl.offsetWidth)console.log(boxEl.offsetHeight)console.log(boxEl.offsetLeft)console.log(boxEl.offsetTop)console.log(boxEl.scrollHeight)console.log(boxEl.scrollTop)// window对象window.onclick function() {console.log(boxEl.scrollTop)}/script/body
/html五、window的大小和滚动
window的width和height
innerWidth、innerHeight获取window窗口的宽度和高度包含滚动条outerWidth、outerHeight获取window窗口的整个宽度和高度包括调试工具、工具栏documentElement.clientHeight、documentElement.clientWidth获取html的宽度和高度不包含滚动条
window的滚动位置
scrollXX轴滚动的位置别名pageXOffsetscrollYY轴滚动的位置别名pageYOffset
也有提供对应的滚动方法
方法 scrollBy(x,y) 将页面滚动至 相对于当前位置的 (x, y) 位置方法 scrollTo(pageX,pageY) 将页面滚动至 绝对坐标
