JavaScript-DOM

document

获取页面的元素

获取元素

	//获取页面标签元素，返回一个数组，可与获取多个，通过[]可以控制获取哪一个
	<p>6666</p>
    <script>
        var tag = document.getElementsByTagName("p")
        console.log(tag);
    </script>

	// 通过类名获取元素，返回一个数组，也可以为多个，通过[]可以控制获取哪一个
	<div class="tag">666</div>
    <div class="tag">777</div>
    <script>
        var classN = document.getElementsByClassName("tag")[0];
        console.log(classN);
    </script>

	//使用率极低
	//通过固定标签的元素name获取
	<img name="img" src="#" alt="">
    <script>
        var name = document.getElementsByName("img")[0];
        console.log(name);
    </script>

	// 通过标签的固定id获取对应元素，id是唯一的
	<div id="tag1">111</div>
    <div id="tag2">222</div>
    <script>
        var id = document.getElementById("tag1");
        console.log(id);
    </script>

	// 接收一个css选择器，查找对应的元素，只返回第一个
	<div id="tag3">999</div>    
    <div id="tag4">666</div>
    <script>
        var query = document.querySelector("#tag3");
        console.log(query);

	// 接受一个选择器，查找并返回所有的元素   []
	<div class="tag9">!!!</div>
    <div class="tag9">@@@</div>
    <script>
        var all = document.querySelectorAll(".tag9");
        console.log(all);

创建元素

<div id="outer"></div>
    <script>
    	// 创建div标签
        var tag = document.createElement("div");
        // 创建文本
        var text = document.createTextNode("666");
        // 创建id
        var id = document.createAttribute("id");
        // 给id赋值
        id.value = 'inside';
        // 把id添加给标签
        tag.setAttributeNode(id);
        // 把文本添加给标签
        tag.appendChild(text);
        // 获取div标签
        var outer = document.getElementById("outer");
        // 把标签添加给标签
        outer.appendChild(tag);
        console.log(outer);
        
    </script>

Element