let flag = confirm('确定删除吗?')
元素 - - - 标签
节点 - - - 标签或者标签内部文本
节点包含元素,比元素多出了文本。
DOM查询
获取元素
document.getElementById()
document/node.getElementsByTagName()
document.getElementsByName()
:专门用于 操作表单。document.getElementsByClassName()
document.body
document.documentElement
:获取html标签。document.all
:获取页面中所有标签。document.querySelector()
:根据css选择器找元素,返回第一个。document.querySelectorAll()
获取元素的节点
元素.childNodes
:包括 文本节点(标签间的空白)在内 的所有 节点;元素.children
:所有 子元素。元素.firstNode
:第一个 子节点;元素.firstElementChild
:第一个 子元素。元素.lastNode
元素.parentNode
:父 元素。元素.previousSibling
:兄弟 节点;元素.previousElementSibling
:兄弟 元素。元素.nextSibling
获取元素的属性
元素.innerHTML
:包含元素标签;node.innerText
:只有文本节点。元素.className
- 表单
元素.name
元素.id
元素.value
获取节点属性
DOM增删改
- 创建元素和节点
tr = document.createElement('tr')
:创建tr
标签。
gzText = document.createTextNode('广州')
: - 拼接/插入/替换/删除
tbody.appendChild(tr)
:将tr
标签添加到tbody
中。
city.insertBefore(pre, next)
:父节点调用。
city.replaceChild(new, old)
:父节点调用。
city.removeChild(bj)
:父节点调用 - 或者直接获取父元素,
父元素.innerHTML += '<li>广州<li>'
实现子元素的添加。
tdody
虽然看不见,但内存中存在。
读写样式
- 读写
元素.style.样式名
:读取和 修改 的都是 内联样式。
- 只读
attrObj = window.getComputedStyle(元素, 伪类)
:读取 当前正在显示的样式,返回样式对象(非IE)。
元素.style
和window.getComputedStyle
返回类型都是CSSStyleDeclaration 对象
。元素.currentStyle.样式名
:读取 当前正在显示的样式(仅IE8及以下支持)。clientWidth、clientHeight:无单位,content+padding;
offsetWidth、offsetHeight: content+padding+border;
scrollWidth、scrollHeight: 滚动区域的宽高,包含溢出部分;scrollLeft、scrollTop:水平/垂直滚动条滚动的距离(可视顶部与真正顶部的距离)。
scrollHeight == scrollTop + clientHeight:说明滚到底了。
offsetParent: 定位父元素; offsetLeft、offsetTop: 边偏移。offsetX、offsetY:client-offset
- 案例:法律条款右侧滑动到底。
window.onload = function () {
let p = document.getElementsByTagName('p')[0];
let btn = document.getElementsByTagName('button')[0];
p.onscroll = function () {
if (this.scrollTop + this.clientHeight == this.scrollHeight) {
let input = document.getElementsByTagName('input')[0];
// 属性名和状态, 无需加style.
input.disabled = false;
btn.disabled = false;
// btn.style.color = 'green';
}
}
btn.onclick = function () {
alert('注册成功');
}
}
兼容IE8及以下
- 根据 方法有无, 解决兼容性。
/*
参数:
ele: 要获取样式的元素
name: 样式名
*/
function getStyle(ele, name) {
// IE9及以上,或正常浏览器
// var cssObj = getComputedStyle(box, null).width;
// IE8及以下
// console.log(box.currentStyle.backgroundColor)
return window.getComputedStyle ? getComputedStyle(ele, null)[name] : ele.currentStyle[name];
}