BCSP-玄子前端开发之JavaScript+jQuery入门CH05_DOM应用

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应用