【web】【DOM】-属性，页面相互传值

最新推荐文章于 2024-06-13 15:29:32 发布

.山间的风

最新推荐文章于 2024-06-13 15:29:32 发布

阅读量648

点赞数 1

CC 4.0 BY-SA版权

分类专栏：小白笔记文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/weixin_46911043/article/details/127366915

小白笔记专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了DOM中的属性操作，包括返回节点的各种信息如nodeName、parentNode、childNodes等，以及document的重要属性如html标签、body标签、title内容和URL。还讲解了页面间传值的方法，以及如何设置、获取和删除元素属性。最后，讨论了元素的client、offset、scroll和overflow属性在获取元素大小和位置时的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM

属性

返回节点名称nodeName

var nlist = document.querySelector('ul')
var li = document.querySelector('.three')
console.log(nlist.nodeName);*//ul*

返回当前节点的父节点parentNode

console.log(nlist.parentNode);*//body*
console.log(nlist.parentNode.parentNode);*//html*

返回所有节点childNodes 类数组

console.log(nlist.childNodes)*//[text, li, text, li, text, li, text]*

返回第一个子节点firstChild

返回第一个子节点firstElementChild

console.log(nlist.firstChild)*//#text*
console.log(nlist.firstElementChild)*//<li>.狗.</li>*

返回最后一个子节点lastChild

返回最后一个子节点lastElementChild

console.log(nlist.lastChild)*//#text*
console.log(nlist.lastElementChild)*//<li>猪</li>*

返回上一个节点previousSibiling

返回上一个节点previousElementSibiling

console.log(li.previousSibling)
console.log(li.previousElementSibling)*//猫的li*

返回下一个节点nextSibiling

返回下一个节点nextElementSibiling

console.log(li.nextSibling)
console.log(li.nextElementSibling)*//鸭的li*

document属性

获取html标签

var html = document.documentElement
console.log(html)

获取body标签

var body = document.body

console.log(body)

设置或获取title内容

var title = document.title

document.title = ‘包育龙pink pig’

console.log(title)

返回当前页面的网址

var url = document.URL

console.log(url)

页面互相传值(例子)

第一个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 页面之间传值 
        a标签
        浏览器存储
    -->
    <!-- 网址拼接内容用？，写在？后面 -->
    <a href="01.html?name=bao&age=88&like=pig">01</a>
</body>
</html>

传到另一个页面并显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pink pig</title>
</head>

<body>
    姓名：<h2>=pink pig</h2>
    年龄：<h2>88</h2>
    爱好：<h2>eating</h2>
</body>
<script>
    //4.返回当前页面的网址
    var url = document.URL
    console.log(url)
  

    var h2s = document.querySelectorAll('h2')

    // 1.通过索引截取问号后面的内容
    var str = url.slice(url.indexOf('?') + 1)
    console.log(str)//name=bao&age=88&like=pig
    //通过&将字符串分割为数组
    var shuzu = str.split('&')
    console.log(shuzu)//['name=bao', 'age=88', 'like=pig']
    //遍历数组，等号再次分割
    for (var i = 0; i < shuzu.length; i++) {
        var shuzu2 = shuzu[i].split('=')
        console.log(shuzu2)//['name', 'bao']
        //['age', '88']
        //['like', 'pig']
        //如果想拿到对应的属性值，判断
        if (shuzu2[0] == 'name') {
            console.log(shuzu2[1])
            h2s[0].innerHTML=shuzu2[1]
        }
        if (shuzu2[0] == 'age') {
            console.log(shuzu2[1])
            h2s[1].innerHTML=shuzu2[1]
        }
        if (shuzu2[0] == 'like') {
            console.log(shuzu2[1])
            h2s[2].innerHTML=shuzu2[1]
        }

    }

</script>

</html>

封装后的

var url = document.URL
    console.log(url)
  

    var h2s = document.querySelectorAll('h2')

    // 1.通过索引截取问号后面的内容
    var str = url.slice(url.indexOf('?') + 1)
    //name=bao&age=88&like=pig
    //通过&将字符串分割为数组
    var shuzu = str.split('&')
    //['name=bao', 'age=88', 'like=pig']
    //遍历数组，等号再次分割
    for (var i = 0; i < shuzu.length; i++) {
        var shuzu2 = shuzu[i].split('=')
        //['name', 'bao']
        //['age', '88']
        //['like', 'pig']
        //如果想拿到对应的属性值，判断
        if (shuzu2[0] == 'name') {
            h2s[0].innerHTML=shuzu2[1]
        }
        if (shuzu2[0] == 'age') {
            h2s[1].innerHTML=shuzu2[1]
        }
        if (shuzu2[0] == 'like') {
            h2s[2].innerHTML=shuzu2[1]
        }

    }
//分装函数 声明
function getValue(key){
    var url = document.URL
    var h2s = document.querySelectorAll('h2')
    var str = url.slice(url.indexOf('?') + 1)
    var shuzu = str.split('&')
    for (var i = 0; i < shuzu.length; i++) {
        var shuzu2 = shuzu[i].split('=')

        if (shuzu2[0] == key) {
           console.log(shuzu2[1])
           return shuzu2[1]
        }        
    }
}
//调用函数
h2s[2].innerHTML= getValue('like')
h2s[0].innerHTML=getValue('name')
h2s[1].innerHTML=getValue('age')

给标签设置属性

设置属性setAttribute(属性名，属性值)

img.setAttribute('src','./1.jpg')

获取属性getAttribute(属性名)

console.log(img.getAttribute('alt'));

删除属性removeAttribute(属性名)

img.removeAttribute('src')

元素大小

client

height+padding width+padding
和子元素大小有关系
动态的得到该元素的边框大小，元素大小

client系列属性	作用
（某元素）element.clientTop	返回某元素上边框的大小
element.clientLeft	返回某元素左边框的大小
element.clientWidth	返回自身包括padding，+内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding，+内容区的高度，不含边框，返回数值不带单位

offset

和子元素大小没关系
动态的得到该元素的位置（偏移）、大小等。

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
（某元素）element.offsetTop	返回某元素相对带有定位父元素上方的偏移
element.offsetLeft	返回某元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding，+border，+内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding，+border，+内容区的高度，返回数值不带单位

scroll

动态的得到该元素的大小和滚动距离
height+padding width+padding
和子元素大小有关系，当子元素超出父元素大小时，
- scrollWidth：子元素的width+padding+border+margin-left+父元素的border，
- scrollHeight：子元素的height+padding+border+margin-top+父元素的border

scroll系列属性	作用
（某元素）element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际高度，不含边框，返回数值不带单位

overflow


overflow：hidden	超出父元素部分隐藏	解决塌陷问题
overflow：scroll	超出父元素部分以滚动条显示
overflow-x:hidden	x方向隐藏，y方向以滚动条显示
overflow-y:hidden	y方向隐藏，x方向以滚动条显示