lovecoding
/
VIP23


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    爱好：<input class="inp" name="hobby" type="checkbox">篮球1
    <input class="inp" name="hobby" type="checkbox">篮球2
    <input class="inp" name="hobby" type="checkbox">篮球3
    <br>
    性别：<input class="inp" name="sex" type="radio">男
        <input class="inp" name="sex" type="radio">女
    <br>
    用户名：<input class="inp" name="username" type="text" >
    <br>
    密码：<input class="inp" name="passwrod" type="text" >
    <br>
    <input id="btn1" type="button" value="提交按钮" >

</body>
<script>
    //根据id获取元素对象
    let btnEl = document.getElementById("btn1");

    console.log( btnEl.value)

    //获取input标签
    let inputArr = document.getElementsByTagName("input");

    console.log(inputArr[0].name)

    // calss
    let classElArr = document.getElementsByClassName("inp");
    //console.log(classElArr)

    for (let i = 0; i < classElArr.length; i++) {
        console.log(classElArr[i])
    }

    // name 返回数组
    let username = document.getElementsByName("username")[0];
    console.log(username)

    // 前一个
    let sexInp = username.previousElementSibling;
    console.log(sexInp)

    // 父元素
    let parentNode1 = username.parentNode;
    let parentNode2 = username.parentElement;
    console.log(parentNode1)
    console.log(parentNode2)

    // 子元素
    let body = document.getElementsByTagName("body")[0];
    console.log(body)

    let arr = body.children

    console.log(arr)

    let input1 = body.firstElementChild

    let input2 = body.lastElementChild

    console.log(input1)
    console.log(input2)

</script>
</html>