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

本文详细介绍了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:hiddenx方向隐藏,y方向以滚动条显示
overflow-y:hiddeny方向隐藏,x方向以滚动条显示
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值