写在前面

最近开始学前端，这篇md文档只是为了让自己脑子不那么难受的
废话不多讲 开始正文

获取元素篇

document可以获取页面之间的元素，通过获取元素与html元素进行交互

document.getElementsByTagName

方法可以搜索HTML标签名，返回符合条件的元素，没有符合的元素返回空集

代码演示

1
2
3
4
5
6
7
8
9
<body>
    <div>
        hello-world
    </div>
    <script>
        var divs = document.getElementsByTagName("div")
        console.log(divs);
        </script>
</body>

这样在页面可以显示出hello-world字样，控制台返回类似数组的东西
所以在可以在后面加上

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div>
        hello-world
    </div>
    <div>
    hello-world2
    </div>
    <script>
        var divs = document.getElementsByTagName("div")[1]
        console.log(divs);
        </script>
</body>

控制台会显示hello-world2
那既然可以显示 就可以改变它（innerHTML）到时候再说

document.getElementsByClassName()

其实差不多 这个通过Class名称获取

代码演示

1
2
3
4
5
6
7
8
9
<body>
    <p class = "text">
        helloworld
    </p>
    <script>
        var dd = document.getElementsByTagName("text")[1]
        console.log(dd);
        </script>
</body>

输出页面和上一个tagname差不多 没啥好讲

document.getElementsByName()

适用于选择拥有name属性的html元素，返回一个类似于数组的对象，其实都一样，毕竟属性相同的元素不止一个，用法也大差不差，写到现在其实脑子已经舒服很多了，但是写都写了，我还是给上线了嘻嘻

代码演示

1
2
3
4
5
6
7
8
9
<body>
    <p class = "text">
        helloworld
    </p>
    <script>
        var dd = document.getElementsByTagName("text")[1]
        console.log(dd);
        </script>
</body>

document.getElementsByName

都一样，这个还不常用，过过过

document.getElementById

适用于拥有id元素的

代码演示

1
2
3
4
5
6
7
8
 <body>
    <div id = "root">helloworld</div>
   <script>
    var text = document.getElementById("root");
    console.log(text);
    
   </script>
</body>

document.querySelector

方法需要接受一个css选择器作为参数，返回匹配选择器的元素节点，如果有多个节点满足条件，则返回第一个匹配节点，没有匹配节点返回null
这个用的还蛮多的

代码演示

1
2
3
4
5
6
7
<body>
    <div class = "nav">nav1</div>
   <script>
    var text = document.querySelector(".nav");
    console.log(text);
   </script>
</body>

document.querySelectorAll()

这时候就有人问了，主播主播，那我想获取多个怎么办啊
有的兄弟，有的，能获取多个元素的方法我们确实有的

代码演示

1
2
3
4
5
6
7
8
<body>
    <div class = "nav">nav1</div>
    <div class = "nav">nav2</div>
   <script>
    var text = document.querySelectorAll(".nav");
    console.log(text);
   </script>
</body>

这样可以返回所有匹配的节点

创建元素篇

代码展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div class = "nav">nav1</div>
    <div class = "nav">nav2</div>
   <script>
    var text = document.createElement("div");//该元素可以生成元素节点
    var dd = document.createTextNode("喵喵喵");//该元素创建文本
    var id = document.createAttribute("id");//生成新的属性节点
    id.value = "root";
    //appendchild()将内容或子元素放到容器中
    text.appendChild(dd);
    text.setAttributeNode(id);
    console.log(text);
       </script>
</body>

这样，控制台可以打印出来一个完整的div元素
再接着，我们将控制台内容放到页面里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div class = "nav">nav1</div>
    <div class = "nav">nav2</div>
    <div id = "container"></div>
   <script>
    var text = document.createElement("div");
    var dd = document.createTextNode("喵喵喵");
    var id = document.createAttribute("id");
    id.value = "root";
    //appendchild()将内容或子元素放到容器中
    text.appendChild(dd);
    text.setAttributeNode(id);
    console.log(text);
    //开始将元素放到页面中
    var container = document.getElementById("container");
    console.log(container);
    container.appendChild(text);
   </script>
</body>

最后

document相关知识如上，前端还是要多写多用，写一篇文档就足够把思绪整理清楚了，接下来就是应用，这几天把三剑客学完，十月一把vue和uniapp肝完！！加油！！！！