dom的介绍获取dom元素和节点_目标dom节点的类名-CSDN博客

本文链接：https://blog.csdn.net/qq_44917015/article/details/111649889
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        之前都是ecmascript es5 es6 代码规范标准
        后面的是 dom bom ajax 其他的内容就没有这么标准 各个浏览器就会有一些不同了
        版本兼容 浏览器兼容
        bom 这个浏览器都是bom 浏览器对象模型 window bom的根元素
        dom 浏览器的内容 document 文档对象模型 dom的根元素
        */
       console.log(window)
       console.log(document)
       console.log(window.document)
    //    bom五个元素
    console.log(window.document,window.location,window.navigator,window.history,window.screen)
    console.log( document.documentElement )//html 标签
    console.log( document.body )// 标签
    console.log( document.head )// 标签
    console.log( document.scripts )// 标签
    console.log( document.title )// 标签
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div>1231231</div>
        <div id="div1">123
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            <span>span123123</span>
            
            <span>span123123</span>
        </div>
        <div>123132</div>
    </div>
    <div class="div0">
        123321
        <span>span1</span>
    </div>
    <div>123321</div>
    <div>123321</div>
    <form action="">
        <input type="text" name="name1">
    </form>
    <script>
        //根据id获取标签元素的类数组列表
        // var div1 = document.getElementById("div1")
        // console.log(div1)
        // // 根据标签名来获取标签列表
        // var divs = document.getElementsByTagName('div')
        // console.log(divs)
        // 根据classname来获取标签列表
        // var div0 = document.getElementsByClassName("div0")
        
        // var span0 = div1.getElementsByTagName('span')
        // console.log(span0)
        // 获取HTMLCollection HTML列表 的两个方法 就是标签列表
        // 元素也可以使用getElementsByTagName这个方法

        // 获取自己对于数据进行处理 添加index

        // 通过id获取元素必须通过document

        // 所有的表单都需要name

        // nodelist 比 htmlcollection大
        // var name1 = document.getElementsByName("name1")
        // console.log(name1)

        // var div1 = document.querySelector("div")//第一个
        // var div1 = document.querySelector("[type='text']")//第一个
        // var div2 = document.querySelectorAll("div")//获取所有div
        // console.log(div1,div2)

        var ids = document.querySelector("#div1")
        // console.log(ids.childNodes)//子节点 nodelists
        // console.log(ids.children)//子元素 htmlcollections 我们获取元素
        // console.log(ids.parentNode)//父节点
        // console.log(ids.parentElement)//父元素
        // console.log(ids.firstChild)//第一个子节点
        // console.log(ids.firstElementChild)//第一个子元素 标签
        // console.log(ids.lastChild)//最后一个子节点
        // console.log(ids.lastElementChild)//最后一个子元素
        // console.log(ids.nextSibling)//下一个兄弟节点
        // console.log(ids.nextElementSibling)//下一个兄弟元素
        console.log(ids.previousSibling)//上一个兄弟节点
        console.log(ids.previousElementSibling)//上一个兄弟元素

        
    </script>
</body>
</html>