BCSP-玄子前端开发之JavaScript+jQuery入门CH05_DOM应用
4.5 操作节点
4.5.1 操作节点的属性
获取节点属性
节点元素.getAttribute("属性名")
设置节点属性
节点元素.setAttribute("属性名", "属性值")
使用getAttribute()方法获取属性值时,如果属性不存在,则返回null
4.5.2 创建和插入节点
创建节点
名称 | 描述 |
---|---|
document.createElement( tagName ) | 创建一个标签名为tagName的新元素节点 |
element.cloneNode( deep ) | 复制某个指定节点。参数deep为布尔类型,若为true,则同时复制当前节点的所有子节点若为false,则仅复制当前节点 |
插入节点
名称 | 描述 |
---|---|
A.appendChild( B ) | 把B节点追加至A的子节点列表的末尾 |
parentNode.insertBefore( A, B ) | 把A节点插入到B节点之前 |
4.5.3 删除和替换节点
名称 | 描述 |
---|---|
node.removeChild( child ) | 删除指定的子节点 |
node.replaceChild( newChild, oldChild ) | 用其他节点替换指定的子节点 |
4.6 获取元素位置
4.6.1 offset
offset 指偏移,即这个元素在文档中占用的所有显示宽度
属性 | 描述 |
---|---|
offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离,只读属性 |
offsetTop | 返回当前元素上边界到它上级元素的上边界的距离,只读属性 |
offsetParent | 返回元素的偏移容器,即对最近的动态定位的包含元素的引用 |
offsetHeight | 返回元素的高度 |
offsetWidth | 返回元素的宽度 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g0gjmcnZ-1682304740072)(./assets/image-20230422175720510.png)]
4.6.2 client
client 根据实际情况选择使用offset或client属性
属性 | 描述 |
---|---|
clientWidth | 返回元素的可见宽度 |
clientHeight | 返回元素的可见高度 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEfKkPkR-1682304740074)(./assets/image-20230422175755310.png)]
4.6.3 scroll
scroll 指滚动,用来描述网页整体与浏览器之间的关系
属性 | 描述 |
---|---|
scrollTop | 返回匹配元素的滚动条的垂直位置 |
scrollLeft | 返回匹配元素的滚动条的水平位置 |
scrollHeight | 在没有滚动条的情况下,返回元素内容的总高度 |
scrollWidth | 在没有滚动条的情况下,返回元素内容的总宽度 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLN8eto9-1682304740075)(./assets/image-20230422175835487.png)]
标准浏览器
document.documentElement.scrollTop
document.documentElement.scrollLeft
chrome
document.body.scrollTop
document.body.scrollLeft
兼容写法
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
BCSP-玄子前端开发之JavaScript+jQuery入门CH05_DOM应用