【web】js之获取元素

最新推荐文章于 2024-09-12 15:08:36 发布

.贰叁

最新推荐文章于 2024-09-12 15:08:36 发布

阅读量101

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_51893107/article/details/126995156

版权

通过id名获取

通过id名获取获取的是单个元素

document.getElementById(‘id名’)

<body>
    	<button id="btn">注册</button>
</body> 
<script>	
	var btn=document.getElementById('btn')
        console.log(btn);
        btn.onclick=function(){
            console.log("注册");
        }
</script>

通过标签名获取

通过标签名获取获取的是数组

document.getElementsByTagName('标签名)[索引值]

<body>
        <button>注册</button>
        <button>登录</button>
</body> 
<script>	
	var btns=document.getElementsByTagName('button')[1]
        console.log(btns);
        btns.onclick=function(){
            console.log("www");
        }
</script>

通过class名获取

通过class名获取元素获取数组

document.getElementsByClassName(‘class名’)

<body>
        <span class="span">静夜思</span>
        <span class="span">李白</span>
</body> 
<script>	
	var spans=document.getElementsByClassName('span')
        console.log(spans);
        spans[1].onclick=function(){
            console.log(lala);
        }
</script>

通过name属性获取

通过name属性获取获取的是数组

document.getElementsByName(‘name名’)表单

<body>
        <input type="text" name="user">
        <input type="password" name="user">
</body> 
<script>	
	var inps=document.getElementsByName('user')
</script>

通过选择器获取

通过选择器获取单个元素

document.querySelector(‘选择器’)

获取该选择器的第一个元素

<body>
        <button>获取表单内容</button>
        <p class="p1">您输入的用户名是:</p>
</body> 
<script>	
	var p1=document.querySelector('.p1')
   	console.log(p1);
</script>

通过选择器获取数组

document.querySelectorAll(‘选择器’)

获取拥有此选择器的元素

<body>
        <button>获取表单内容</button>
        <p class="p1">您输入的用户名是:</p>
</body> 
<script>	
	var button=document.querySelectorAll('button')[2]
   	console.log(button);
</script>

补充

只有通过id和标签名获取元素没有兼容，其他都不兼容低版本ie.
获取多个元素的，获取的都是数组.
不只是通过document对象获取元素，也可以通过父元素获取子元素.

通过父元素获取子元素

<body>
    	<div class="father">
        <p style="background-color: green;">daer</p>
    </div>
</body> 
<script>	
	var father=document.querySelector('.father')
    	var daer=father.getElementsByTagName('p')[0]
</script>

js如何获取或者设置标签的属性（只能获取或者设置行间属性）

<body>
    <div class="father">
        <p style="background-color: green;">daer</p>
    </div>
</body> 
<script>	
	var father=document.querySelector('.father')
        var daer=father.getElementsByTagName('p')[0]
        father.onclick=function(){
            //js如何获取或者设置标签的属性（只能获取或者设置行间属性）
            //获取：元素.属性名
            //设置：元素.属性名=属性值
            console.log(daer.style.backgroundColor);
            daer.style.backgroundColor='pink'
        }
</script>

设置属性:元素.属性名=属性值

获取属性:元素.属性名

设置样式的本质和设置属性相同,设置样式就是设置style属性

获取元素，绑定事件

<body>
        <button id="btn">注册</button>
        <button>登录</button>
        <br>
        <input type="text" name="user">
        <input type="password" name="user">
        <br>
        <button>获取表单内容</button>
        <p class="p1">您输入的用户名是:</p>
        <div class="father">
        <p style="background-color: green;">daer</p>
    </div>
</body>
<script>	
	var input=document.getElementsByTagName('input')[0]
        var btn=document.getElementsByTagName('button')[2]
        var p=document.getElementsByClassName('p1')[0]
        console.log(input,btn,p);

        //绑定事件
        btn.onclick=function(){
            //点击事件执行代码
            //将表单内容赋值为p标签
            //1.获取表单内容
            var v=input.value
            //value 获取或者设置表单的内容
            //innerHTML 获取或者设置其他标签
            console.log(p.innerHTML);
            p.innerHTML="您输入的用户名是:"+input.value
        }
</script>