阅读 814

js通过id获取元素的值（js查找元素的方法）

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

Document 接口描述了任何类型的文档的通用属性与方法，根据不同的文档类型（例如HTML、XML）提供了不同的API，比如，使用 “text/html” 作为内容类型的HTML文档，实现了 HTMLDocument，而XML文档则实现了XMLDocument，HTMLDocument和XMLDocument接口都是继承自Document接口；

Javascript通过Document类型表示文档；在浏览器中，document对象是Document的一个实例，更具体一点，是HTMLDocument的一个实例，其表示整个HTML页面；并且document对象也是window对象的一个属性，可以将其作为全局对象来访问；因此document对象，既属于BOM又属于DOM的对象；

Document节点的特征：

  • nodeType的值为9
  • nodeName的值为#document
  • nodeValue的值为null
  • parentNode的值为null

其子节点可能是一个DocumentType（最多一个）、Element（最多一个，即html）、ProcessingInstruction或Comment；

console.log(document);  // 在FF控制台可以看出是属于HTMLDocument类型
console.log(document.nodeType); // 0
console.log(document.nodeName); // #document
console.log(document.nodeValue);  // null
console.log(document.parentNode);  // null
console.log(document.childNodes.length);  // 2

文档的子节点：

DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment；




    Document

documentElement属性：

返回文档直接子节点，始终指向HTML页面中的元素，也就是文档的根元素，并且它一定是文档的根元素；

// 注意：在HTML中的第二行有可能是注释
console.log(document.childNodes[2]);  // 
console.log(document.documentElement);  // 
console.log(document.lastChild);  //

借助这个只读属性，能方便地获取到任意文档的根元素；

body属性：

作为HTMLDocument的实例，document对象还有一个body属性，直接指向；

console.log(document.body);

对于一个拥有元素的文档来说，返回的是最外层的元素；

另外，该属性是可写的，且为该属性赋的值必须是一个元素；

// 如果HTML结构为body id="oldBody"，则:
console.log(document.body.id);  // oldBody
var newBody = document.createElement("body");
newBody.id = "newBody";
document.body = newBody;
console.log(document.body.id);  // newBody

head属性：

指向元素，这个Document对象扩展的一个属性，类型为HTMLHeadElement；

如果有多个元素，则返回第一个；

document.head 是个只读属性，为该属性赋值只会静默失败，如果在严格模式中，则会抛出TypeError异常；

需要注意的是，如果文档源代码中未显式的包含和元素，浏览器将隐式的创建它们；

doctype属性：

该属性是DocumentType 类型，表示了一个包含文档类型的节点对象，指向标签；

文档当中最多只有一个DocumentType元素；

console.log(document.doctype);  // 
console.log(document.doctype.nextSibling); // 
console.log(document.childNodes[0]); //

如果存在文档声明，则将其作为document的第一个子节点，解析DOCUMENTTYPE_NODE类型，如果没有声明，则为null；

注：DocumentType对象不能动态创建，它是只读的；

查找元素（选取文档元素）：

在DOM中，取得特定的某个或某组元素，并执行一些操作，这是最重要的应用了；

为了获取文档中的这些元素Element对象，DOM定义了许多方式，如：用指定的id属性、name属性、标签名、CSS类或CSS选择器；

取得元素的操作可以使用document对象的几个方法来完成；Document类型为此提供了两个方法；

getElementById()方法：

该方法接收一个参数，即要获取的元素的ID；如果找到就返回这个元素，类型是HTMLElement，如果不存在，则返回null；该参数ID是区分大小写的；

如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素；

var mydiv = document.getElementById("mydiv");
console.log(mydiv);
可以封装一个通过ID查找多个元素的函数，如：
/**
* 函数接受任意多的字符串参数
* 返回一个对象
* 如果一个id对应的元素未定义，则抛出错误
*/
function getElements(/*ids...*/){
    var elements = {};  // 一个空map映射对象
    for(var i=0; i

getElementById方法不会搜索不在文档中的元素；当创建一个元素，并且分配ID后，必须要使用appendChild、insertBefore等方法把元素插入到文档中，之后才能使用getElementById()方法获取到；

var elt = document.createElement("div");
elt.id = "myelt";
document.body.appendChild(elt);  // myelt,添加到文档对后，才能被获取到到
var el = document.getElementById("myelt");
console.log(el);  // null

getElementsByName()方法：

返回给定name 属性的所有元素NodeList集合对象；

var mytexts = document.getElementsByName("mytext");
console.log(mytexts); // dom2.html:17 NodeList(2) [p, div]

该方法定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，也就是只有HTMLDocument类型才有的方法，在XML文档中不可用；


    选择你最喜欢的城市
    
    
        
  • 
            
    • 
        
  • 
            
    • 
        
  • 
            
    •

该方法返回的是NodeList对象，在NodeList中返回的元素按照在文档中的顺序排序的，所以可以使用方括号语法来取得每个元素；

console.log(document.getElementsByName("city")[0]);

但IE与Edge返回的是HTMLCollection；但namedItem()方法是属于HTMLCollection类型的，所以，非IE调用namedItem()方法会抛出异常；并且在IE中namedItem()只会返回第一项，因为每一项的name特性都是相同的；

console.log(citys.namedItem("city"));

为某些HTML元素设置name属性，将自动在windows对象中创建对应的属性，对Document对象也是类似的；比如，为

、、