属性操作与元素节点操作和onscroll

meng_qian_nian

已于 2022-03-27 14:37:24 修改

阅读量618

点赞数

文章标签： js

于 2022-03-26 12:02:17 首次发布

本文链接：https://blog.csdn.net/meng_qian_nian/article/details/123753477

版权

属性操作

input的name,value img的src a的href等属性都属于天生自带的属性

id,class,style,title属性也都是天生自带的属性

属性节点包含属性,元素节点包含属性节点

元素的三个方法

getAttribute获取 setAttribute设置 removeAttribute移除属性操作(常用)

nameNodeMap三个方法

getNamedItem获取,removeNamedItem移除,setNamedItem设置新节点属性节点操作(不常用)

对应天生自带的属性,可以通过标签元素.属性名来直接获取对应的属性值

<div ab='a' id="b"></div>
    <a href="aaa"></a>
    <script>
        document.getElementsByTagName('div')[0].ab
        console.log(document.getElementsByTagName('div')[0].ab);//获取不到
        console.log(document.getElementsByTagName('div')[0].id);
        console.log(document.getElementsByTagName('a')[0].href);
		b.className = '你'  //可以直接赋值进行修改
	</script>

对于不是天生的,可用Attribute,同时Attribute也适用与天生的

<div ab='a' id="b" class="c"></div>
    <a href="aaa"></a>
    <script>
        var ab = b.getAttribute('ab')
        console.log(ab);
        var cla = b.getAttribute('class')
        console.log(cla);//天生的也可以用
		b.setAttribute('name', '123') //设置一个名为name的属性,值为123(参数1为属性名,参数2为属性值)
        console.log(b.getAttribute('name'));
        b.removeAttribute('class')
//都可以在浏览器检查元素里查看
    </script>

attributes

通过attributes获取所有属性,是只读对象,可以设置新的,不能直接赋值修改

可以通过下标及对应的属性名进行方法

返回nameNodeMap,包含多个数据,用下标和length属性.有三个方法(getNamedItem获取,removeNamedItem移除,setNamedItem设置新节点)

<div ab='a' id="b"></div>
    <a href="aaa"></a>
    <script>
        var attr = box.attributes
        console.log(attr); //返回的是nameNodeMap,包含多个数据,用下标和length属性
        console.log(attr[0]); //访问第一个节点
        console.log(attr['ab']); //访问ab节点
        console.log(attr.length); //访问个数

		console.log(attr.item(0)); //访问第一个节点
        console.log(attr.getNamedItem('ab')); //访问ab节点

		console.log(attr.ab); //访问ab节点


		//设置  获取的是一个节点对象,不能直接赋值
        attr.removeNamedItem('ab')//移除ab节点
        var abc = document.createAttribute('abc')//创建节点
        abc.value = 'hello' //给新建的节点赋值
        attr.setNamedItem(abc)//设置新建的节点
        console.log(attr['abc']);
	</script>

元素节点操作

<script>
        // 元素节点操作的方法
//创建
        var div = document.createElement('div') //创建元素div
        div.className = 'a' //给创建的div元素指定一个class属性值
        div.innerText = '吃饭睡觉' //给创建的div设置文本
        var body = document.getElementsByTagName('body')[0] //获取body
        body.appendChild(div) //给body添加子节点div
        var p = document.createElement('p') //创建p
        p.innerText = '我是p标签'

//替换
        body.replaceChild(p, div) //将div替换成p
        var text = document.createTextNode('你好')
//添加
        p.appendChild(text) //将text文本节点添加到p标签里.添加到最后面
        var hello = document.createTextNode('aaaa')
        p.insertBefore(hello, text) //将hello添加到p里,且在text前面
        var text1 = text.cloneNode() //克隆一个新节点
        p.appendChild(text1)
        var a = document.createElement('a')
        a.innerHTML = 'a'
        body.appendChild(a)
        body.removeChild(a) //删除子节点a
    </script>

元素节点的关系

<body>
    <div id="box">
        <div id="innerbox">
            <b>2</b>
        </div>
        <p>3</p>
        <a href="">4</a>
    </div>
    <script>
        var innerbox = document.getElementById('innerbox')
        console.log(innerbox.parentNode); //获取父节点
        console.log(innerbox.children); //子节点返回的是HTMLCollection(元素节点)
        console.log(innerbox.children[0]); //获取第一个子元素节点(常用),不包含文本节点
        console.log(innerbox.childNodes); //获取所有子节点,包含文本节点
        console.log(innerbox.firstChild); //获取第一个子节点,包含文本节点(空格也包含)
        console.log(innerbox.lastChild); //获取最后一个子节点,包含文本节点

        console.log(innerbox.nextSibling); //获取下一个兄弟节点,包含文本节点
        console.log(innerbox.previousSibling); //获取上一个兄弟节点,包含文本节点
        console.log(innerbox.nextElementSibling); //获取下一个兄弟元素节点,找不到返回null
        console.log(innerbox.previousElementSibling); //获取上一个兄弟元素节点,找不到返回null
    </script>

</body>

onscroll,给浏览器添加滚动条

<head>
    <style>
        body {
            height: 2000px;
        }
        
        #top {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="top">
    </div>
    <script>
        window.onscroll = function() {
            var scro = document.documentElement.scrollTop | document.body.scrollTop //获取滚动条离顶层的距离(|是兼容)
            console.log(scro);
            document.querySelector('div').innerText = scro
        }
    </script>
</body>