document和element

最新推荐文章于 2022-11-15 10:41:22 发布

pqxpq

最新推荐文章于 2022-11-15 10:41:22 发布

阅读量233

点赞数

分类专栏：转前端(html+css+js) 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_52563729/article/details/127192449

版权

转前端(html+css+js) 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

document创建元素

<!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>

    <div id="container">导航</div>
    <script>

        //creatElement()方法用来生成元素节点，并且返回该节点
        var p1=document.createElement("p");
        console.log(p1);
        //创建文本
        var content= document.createTextNode("我是文本")
        //appendChild将子元素放到容器中
        p1.appendChild(content)

        //createAttribute增加属性
        var id =document.createAttribute("id")
        id.value="123"
        console.log(id);
        //将id塞进去text
        //只有属性的添加是通过setAttributeNode,其他的所有的标签和文本的放入都是appendChild
        p1.setAttributeNode(id)

        //将id塞到页面之上，放在body里面
        var temp=document.getElementById("container")
        temp.appendChild(p1)



    </script>
</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>Document</title>
</head>
<body>
    <div>hello</div>
    <div>world</div>
    <p class="text1">hell2</p>
    <p class="text1">hell1</p>
    <p class="text1">hell3</p>
    <p class="text1">hell4</p>
    <p class="text2">hell1</p>
    <p class="text2">hell2</p>
    <p class="text2">hell3</p>
    <p class="text2">hell4</p>
    <div id="root">hahahha   </div>

    <form name="login"></form>


    <div class="nav">nav1</div>
    <div class="nav">nav2</div>



    <script>
        //这个方法的返回值是一个类似数组对象,可以反应html文档的变化，没有任何元素就返回空集
        var div1=document.getElementsByTagName('div')[0];
        //如果传入*,就是返回所有html元素
        console.log(div1); 
        div1.innerHTML="aaaaaaaaaaaaaaaa";

        //class,不仅可以设置样式，还可以作为读取元素的属性
        var text = document.getElementsByClassName('text1 text2');
        console.log(text);


        //byname用于选择form,radio,img等等属性，还是返回类似于数组的值,使用率很低
        var from=document.getElementsByName("login")[0];
        console.log(from);

        //最常用的！！！给页面元素设置id,只读一个，因为id是唯一的
        var root=document.getElementById('root');
        console.log(root);
        root.innerHTML="ahhahahahah";



        //常用queryselector(),返回匹配该选择器的元素节点。如果有多个节点
        //满足配条件，则返回第一个匹配的节点，如果没有发现匹配的节点，则返回null
        //如果是id＋#,如果是选择器就加.
        var nav=document.querySelector(".nav");
        console.log(nav);

        //和上面一样不过获得多个
        var navs=document.querySelectorAll(".nav");
        console.log(navs);


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

element

<!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>
    element对象对应网页的html元素,每一个html元素在dom数上都会转化成一个element节点对象
    <br>

    <div class="box" id="root">hell0</div>
    <script>
        var t=document.getElementById("root")
        //改id
        t.id="roots"
        console.log(t.id);
        //改class
        t.className="boxs box1 box2"
        console.log(t.className);
        
        /*
        classList
        add添加class(多个的话就中间加,)
        remove移除class
        contains检查是不是包含某个class
        toggle，如果存在就移除，如果不存在就添加
        */

        t.classList.add("mybox")
        console.log(t.className);

        root.innserHTML//这个不加内容是读取，加内容是读取,可以识别标签
        root.innserText//效果和上面一样,区别就是下面这个不能识别标签,会把标签识别为一个字符串,这是纯改变不识别标签


        

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