目录一. doucument对象获取元素方法1.1 document.getElementByTagName()1.2 documrnt.getElementByClassName()1.3 document.getElementById()1.4 document.getElementByName()1.5 document.querySelector()1.6 document.querySelectorAll()二. document对象创建元素方法一. doucument对象获取元素方法1.1 document.getElementByTagName()通过类名获取指定标签双引号内填写标签名称如果填入*代表所有就会返回HTML文档全部的标签。该方法通过搜索HTML标签名称来返回符合条件的元素。它的返回值类似于集合数组对象(HTML Collection 实例)可以实时反应HTML文档的的变化如果没有匹配到任何元素就会返回一个空集。如下代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div盒子1/div div盒子2/div div盒子3/div div盒子4/div script var divs document.getElementsByTagName(div); console.log(divs); var ps document.getElementsByTagName(p); console.log(ps); /script /body /html然后保存在浏览器打开开发者工具控制台就可以看到在控制台输出的两个集合divs集合含有四个div元素而ps集合因为没有任何一个p标签而显示空集合1.2 documrnt.getElementByClassName()通过标签class类属性值获取标签元素该方法返回一个class属性为指定值的所有符合标签的元素集合如果没有符合条件的标签则返回一个空集合。如下实例代码!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div classcontain1盒子1/div div classcontain1盒子2/div div classcontain2盒子3/div div classcontain2盒子4/div script var list1 document.getElementsByClassName(contain1); console.log(list1); var list2 document.getElementsByClassName(contain2); console.log(list2); /script /body /html保存然后在浏览器打开控制台就可以看到 list1 集合和 list2 集合各自含有两个元素1.3 document.getElementById()该方法返回指定Id属性值的元素节点由于各个Id值唯一所以该方法返回值也只有一个即指定的某个标签而不会是多个此外该方法参数区分大小写。如下代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body div idhezi盒子1/div div idHezi盒子2/div div idheZi盒子3/div div idHEZI盒子4/div script var obj1 document.getElementById(hezi); console.log(obj1); var obj2 document.getElementById(Hezi); console.log(obj2); var obj3 document.getElementById(heZi); console.log(obj3); var obj4 document.getElementById(HEZI); console.log(obj4); /script /body /html保存在浏览器打开即可看到方法只返回一个元素且区分大小写1.4 document.getElementByName()通过标签name属性值获取符合元素的标签方法返回值一个集合。但该方法并不常用可作为了解。示例代码如下body div namehezi盒子1/div div namehezi盒子2/div div nameHEZI盒子3/div div nameHEZI盒子4/div div nameHeZi盒子5/div div nameHeZi盒子6/div script var list1 document.getElementsByName(hezi); console.log(list1); var list2 document.getElementsByName(HeZi); console.log(list2); var list3 document.getElementsByName(HeZi); console.log(list3); /script /body控制台输出list1、list2、list3元素集合除了上述四个选择器之外JavaScript在后来又新增了几个选择器但下面要说的两种最为常用1.5 document.querySelector()该方法可传入一个选择器作为参数是前面几种选择器的合成体。如果想使用Id选择器则双信号内填入#Id如果是类选择器则填入.class此外该方法返回匹配到的单个节点元素如果匹配到多个只会返回第一个如果没有匹配到则返回null如下示例代码body div classcontain盒子1/div div classcontain盒子2/div div ida3盒子3/div div nameHEZI盒子4/div script var obj1 document.querySelector(.contain); console.log(obj1); var obj2 document.querySelector(#a3); console.log(obj2); /script /body保存在浏览地打开即可得到如下所示结果.Id值就是Id选择器即便有两个符合但仍然只返回第一个#class值就是class选择器1.6 document.querySelectorAll()上面我们说到了document.querySelector选择器值返回单个元素对象而document.querySelectorAll选择器则可以返回多个对象而这没有太大区别只是返回值一个为单个对象一个为集合因此通常情况下都会选用 document.querySelectorAll 选择器。这里就不再举例说明了。二. document对象创建元素方法通常情况下我们写前端页面都是直接在HTML文档中通过标签来进行编写。但实际上JavaScript也给我们提供了创建节点的方法可以通过调用方法的方式创建页面标签并填充文本和标签属性。上面三个方法createElement 可以创建一个标签元素createTextNode 可以创建节点文本值createAttribute 可以创建标签属性但是调用这三个方法创建的三个对象是各自独立存在的当我们需要将它们组合在一起形成一个完整的标签时就需要调用 appendChild 方法和 setAttributeNode 方法此方法可以将节点文本对象和属性对象加入到标签之内从而形成一个完整的标签示例代码如下body !-- 创建一个div盒子 -- div idabcde/div script // 创建p文本标签对象 var p_tag document.createElement(p); // 创建p标签文本值对象 var p_text document.createTextNode(我是p标签); // 创建p标签id值为aaa var p_id document.createAttribute(id); // 给id赋值为aaa p_id.value aaa; console.log(p_tag); console.log(p_text); console.log(p_id); // 将文本对象添加至标签对象 p_tag.appendChild(p_text); // 将id值添加至标签对象 p_tag.setAttributeNode(p_id); // 获取div盒子对象 var divObject document.getElementById(abcde); // 将p标签添加值盒子内展示 divObject.appendChild(p_tag); /script /body保存在浏览器打开就可以看到在p/p标签内添加的内容已经显示在页面中了且标签的属性也打印在控制台。