本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01js通过id获取元素的值-js查找元素的方法

本文章为《网页前端开发Javascript视频》教学课件。请相互配合师哥的Javascript在线课程学习培训。

文本文档插口叙述了一切种类文本文档的通用性特性和方式，并依据不一样的文件种类(如HTML和XML)给予不一样的API。比如，以“text/html”为內容种类的HTMLDocument完成了HTMLDocument，而XmlDocument完成了XMLDocument，HTMLDocument和XMLDocument插口都承继了Document插口。

文本文档由Javascript文本文档种类表明；在网页中，document目标是Document的一个案例，更具体地说，是HTMLDocument的一个案例，它意味着全部HTML网页页面；而且文本文档目标也是对话框目标的特性，能够做为全局性目标浏览。因而，文本文档目标与此同时归属于BOM和DOM

文本文档连接点的特点:

nodeType的值为9nodeName的值为#documentnodeValue的值为nullparentNode的值为null

它的子连接点能够是DocumentType(较多一个)，Element(较多一个，即html)，ProcessingInstruction或Comment；

console.log(document); // 在FF控制面板能够看得出是归属于HTMLDocument种类console.log(document.nodeType); // 0console.log(document.nodeName); // #documentconsole.log(document.nodeValue); // nullconsole.log(document.parentNode); // nullconsole.log(document.childNodes.length); // 2

文本文档的子连接点:

依据DOM规范，文本文档连接点的子连接点能够是文本文档种类，原素，解决命令或注解；。

Documentconsole.log(document.childNodes); // 应用FF查询 NodeList(3)

DocumentElement特性:

回到文本文档的立即子连接点，自始至终偏向HTML网页页面中的原素，即文本文档的根原素，且务必是文本文档的根原素；

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

依靠这一写保护特性，您能够更好地获得一切文本文档的根原素。

人体特性:

做为HTMLdocument的一个事例，document目标还有一个body特性，立即偏向；

console.log(document.body);

针对包括原素的文本文档，将回到最外面的原素。

除此之外，特性是应写的，分派给特性的值务必是原素；

// 假如HTML构造为body id="oldBody"，则:console.log(document.body.id); // oldBodyvar newBody = document.createElement("body");newBody.id = "newBody";document.body = newBody;console.log(document.body.id); // newBody

文章标题特性:

偏向原素，该文本文档目标拓展的一个特性，种类为HTMLHeadElement；

如果有好几个原素，则回到第一个原素；

Document.head是写保护特性，为该特性取值只能无音地不成功。假如处在严格模式，将引起种类不正确出现异常。

一定要注意，假如文本文档源码沒有显式包括和原素，电脑浏览器将隐式建立他们。

Doctype特性:

该特性归属于DocumentType，表明包括文本文档种类并偏向标识的连接点目标；

一个文本文档中较多有一个DocumentType元素；

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

如果有文本文档申明，将其做为文本文档的第一个子连接点，分析DOCUMENTTYPE_NODE种类；要是没有申明，则为空；；

留意:文本文档种类目标不可以实例化，它是可读写的；

搜索原素(挑选文本文档原素):

在DOM中，获得特殊原素或原素组并实行一些实际操作是最重要的应用软件。

为了更好地在文件中获得这种Element目标，DOM界定了许多方法，例如:应用规定的id特性，name特性，标识名，CSS类或CSS选择符；

获得原素的实际操作能够根据文本文档目标的几类方式来进行。文本文档种类因此给予了这两种方式；

GetElementById()方式:

该方式接受一个主要参数，即要获得的原素的id；假如寻找，则回到该原素，种类为HTMLElement假如不会有，则为null被回到；主要参数标志区别英文大小写；

假如网页页面中好几个因素的标志值同样，则只回到文本文档中的第一个原素。

var mydiv = document.getElementById("mydiv");console.log(mydiv);能够封裝一个根据ID搜索好几个因素的涵数，如：/*** 涵数接纳随意多的字符串数组主要参数* 回到一个目标* 假如一个id相匹配的原素未定义，则抛出去不正确*/function getElements(/*ids...*/){ var elements = {}; // 一个空map投射目标 for(var i=0; i

getElementById方式不检索文本文档中都没有的原素；建立原素并分派标志时，务必根据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()方式:

回到给出名字特性的全部原素连接点目录结合目标；

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

方式是在HTMLDocument类中界定的，而不是在Document类中界定的，因此只对HTML文本文档可以用，换句话说，只对HTMLDocument种类可以用的办法在XML文本文档中不能用。

挑选你感兴趣的大城市 北京市 南京市 蚌埠市 var citys = document.getElementsByName("city");console.log(citys);

方式回到一个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目标也是如此的；例如，为，，，，或原素设定name特性，即在Document目标中建立为此name特性数值名称的特性；为一些HTML原素设定名字特性会在对话框目标中全自动建立相对应的特性，类似Document目标。比如，设定，，，，或原素的命名特性，即在Document目标中建立一个以名字特性值做为名字的特性；

console.log(document.myform);

即使如此，提议不能用这类方法获得原素，反而是显式应用getElementsByName()方式。

GetElementsByTagName()方式:

方式是根据标识名获得原素，标识名接受一个主要参数，即要获得的原素的标识名；回到一个包括零个或好几个因素的HTMLCollection集合目标，这是一个动态性结合，十分类似NodeList；

var spans = document.getElementsByTagName("span");console.log(spans); // HTMLCollection

它具备length特性，能够根据方括号或item()方式浏览HTMLCollection目标中的项。还有一个namedItem()方式，能够根据原素的name特性获得结合中的项，但还可以简称为用方括号浏览；即如果是标值，则启用item()；如果是字符串数组数据库索引，则启用named item()；

var divs = document.getElementsByTagName("div");console.log(divs);console.log(divs[0]);console.log(divs.item(1));console.log(divs.namedItem("innerDiv"));console.log(divs["innerDiv"]);console.log(images[0].src);images.item(1).src = "images/3.jpg";

假如传到“*”，则获得网页页面中的全部原素。(在JS和CSS中，*配对全部使用通配符)；

var nodes = document.getElementsByTagName("*");console.log(nodes);

网页页面上的全部物质将依照他们产生的次序打印出(沒有结构分析)；

在HTML中，方式主要参数不用区别英文大小写，可是在XML中，他们区别英文大小写。

Element类还界定了getElementsByTagName()方式，其基本原理与Document同样，但它只挑选启用该方式的原素的子孙后代原素；

var mydiv = document.getElementById("mydiv");// 还可以根据getElementsByTagName来获得// var mydiv = document.getElementsByTagName("div")[0];var spans = mydiv.getElementsByTagName("span");console.log(spans);

文本文档信息内容:

做为html文本文档的一个事例，文本文档目标有一些规范文本文档目标沒有的特性。这种特性给予了有关文本文档目标所表明的页面的一些信息内容。

从BOM的视角看来，文本文档目标是对话框目标的特性，它由一系列结合构成，能够浏览文本文档的全部一部分，并给予网页页面自身的信息内容。能够觉得该文本文档是载入的html文本文档。

Document.title:包括原素中的文字，根据它能够获得或改动当今网页的文章标题；

var originalTitle = document.title;console.log(originalTitle);document.title = "zeronetwork title";// 文章标题跑马灯效果var str="北京市零点网络技术有限责任公司-";document.title = str;function titleMove(){ str = str.substring(1,str.length) str.substring(0,1); document.title = str;}setInterval("titleMove()",1000);

LastModified:回到文本文档之前改动的日期和時间；

cookie:HTTP cookie的一个独特特性，容许Javascript读写能力；

部位:指与对话框目标的部位特性差不多的部位目标；

网站地址:包括网页页面的详细网站地址；一般，该特性的值与location.href特性同样；它不包括Location目标的变化规律，即URL跳转产生时，这一URL特性保存文档的具体URL，始终不变，可是location.href会更改；Location.href是应写的和文本文档。网站地址是可读写的。

console.log(document.URL);console.log(location.href);document.URL = "demo.html"; // 失效console.log(document.URL);// location.href = "demo1.html"; // 自动跳转

Referrer:源网页页面的URL(连接到当今网页的网页页面)；要是没有来源于，引入者是一串空；该特性是可读写的；

console.log(document.referrer);

这一特性在剖析网址的SEO数据信息时很有效。

var referrer = document.referrer;var origin = location.origin;console.log(referrer);console.log(origin);if(referrer){ if(referrer.indexOf(origin) == 0){ document.write("站内访问"); }else{ document.write("从外部链接：" referrer "进到"); }}else{ document.write("立即开启");}

关键词搜索:

var ref = document.referrer;console.log(ref);if(ref.indexOf("http://127.0.0.1:5500/search.html?") == 0){ var args = ref.substring(ref.indexOf("?") 1).split("&"); for(var i=0; i检索的是：");keys = args[i]。字符串函数(2)。分拆(“ ”；for(key中的var k){ document . write(decodeURIComponent(key[k]) "
"；} break} } }域特性:获得或设定当今文本文档的网站域名；

该特性容许同一网站域名下的可靠Web服务端中间的合作，在Web网页页面中间互动时放开同源策略的安全性限定，可写但有安全性限定，即不可以给域取值；

您无法将此特性设定为不包含在URL中的域；

// FF提醒“The operation is insecure.”，Chrome提醒并不是127.0.0.1的二级域名// document.domain = "www.zeronetwork.cn"; // 出现异常console.log(document.domain);

文本文档目标的结合:

除开特性和方式以外，文本文档目标也有一些特别的结合。这种结合是HTMLCollection目标，给予了浏览文本文档公共性一部分的快捷方式图标，包含:

Document.anchors:包括文本文档中全部具备name特性的原素；此特性已从Web标准中删掉，但电脑浏览器仍适用它，因而请试着千万别应用它。

零程序猿

Web前端工程师

DIV

后端工程师

DIV

苹果开发

DIV

var win = window.open("link.html","newWin","width=250,height=150");function jump(name) { console.log(name); if(win.document.anchors[name]){ win.location.hash = name; win.focus(); }else{ alert("锚不会有") }}

Document.links:包括文本文档中全部具备href特点的原素或原素；

var mydiv = document.getElementById("mydiv");var links = document.links;for(var i=0,len=links.length; i

开启外部链接提示:

var links = document.links;for(var i=0,len=links.length; i

Document.applets:包括文本文档中的全部原素；

Document.forms:包括文本文档中的全部原素，与document . getelementsbyname(" form ")获得的結果同样。

console.log(document.forms); // HtmlCollectionconsole.log(document.forms.myform);console.log(document.forms[0]);console.log(document.forms["myform"]);console.log(document.forms.myform.username);

document . embedded:包括文本文档中的全部原素；

Document.plugins:包括文本文档中的全部软件；留意navigator.plugins的差别；

console.log(document.plugins); // HTMLCollectionconsole.log(navigator.plugins); // pluginArray

document.images：包括文本文档中全部的原素即时结合，结合中的每一个原素意味着了一个image元素的HTMLImageElement，与document.getElementsByTagName(“img”)获得的结论是同样的；Document.images:它包括文本文档中全部原素的即时结合，结合中的每一个原素意味着一个图象原素的一个HTMLImageElement，它与文本文档得到的結果同样。getElementSBYTAGNAME(" img ")；

Document.scripts:回到一个HTMLCollection目标，该目标包括当今文本文档中全部原素的结合；

Document.all:一个写保护特性，回到包括网页页面上全部原素的HTMLAllCollection已从Web标准中删掉，但电脑浏览器适用，但不建议应用。結果与document . getelementsbytagname(“*”)获得的結果基本一致；

console.log(document.all); // HTMLAllCollectionconsole.log(document.getElementsByTagName("*")); // HTMLCollectionconsole.log(document.all[9]);document.all[9].innerHTML = "零点程序猿";// id或name为"mydiv"的原素,可是有差异的,为name的原素仅仅插进textdocument.all["mydiv"].innerHTML = "

零点程序猿

";

这种结合一直能够根据HTMLDocument目标来浏览，而且他们全是动态性的。可是如今早已被document.getElementsByTagName()替代了，有一些早已废旧了，不应该再用了，可是由于方便使用，或是常常用。

文本文档撰写:

Document目标，能够将文字字符串数组载入文本文档流；

Write()和writeln()方式:

两者都接纳一个字符串数组主要参数，即要载入輸出流的文字；Write()将按原状载入，writeln()将在字符串数组结尾加上一个新的行标识符(\ n)；

这两个方式联接他们的字符串数组主要参数，随后将結果字符串数组插进到文本文档中启用他们的脚本制作原素的部位。

document.write("

" document.title "

");document.write("" (new Date()).toString() "");

不但輸出內容，还分析成DOM原素；

主要参数能够是各种各样方式，比如:

// 一部分更换为writeln()方式var username = "wangwei";document.write("自己的名字：" username "
");document.write("sum:" (5 4));document.write("");document.write("HTML","CSS","Javasc ");document.write("")var arr = ["

零互联网

","

王维

","

网

"];document.write(arr.join("));function func(){ return "func";}document.write(func "
");document.write(function(){ return "Happy";}());

write()方式只可用以在分析文本文档时将HTML輸出到当今文字。假如在载入文本文档后将write()方式放进涵数或启用document.write()方式，輸出內容将调用全部网页页面。比如:

window.onload = function(){ document.write("零点程序猿");}

这儿有一个难题。理论上，调用全部网页页面后，应当消除初始网页页面中的全部自变量合值，但实际上并不是这样。IE就这样的个人行为，可是别的电脑浏览器会将自变量合值保存在初始內容中。

var num = 10;function fun(){ document.write("fun");}var mydiv = document.getElementById("mydiv");window.onload = function(){ document.write("调用了全部网页页面"); console.log(num); fun(); document.body.appendChild(mydiv);}正由于他们兼容问题，因此不要在新文本文档流中启用原內容中的自变量合值；

Open()和close()方式:

您还可以应用write()方式在别的对话框或架构页中建立新文本文档，但它往往与close和open方式一起应用。

Open()和close()各自用以开启和关掉浏览器的輸出流；假如在页面加载全过程中应用write()或writeln()方式，则不用这2种方式，由于这时文本文档是开启的。向载入的文本文档载入数据信息时，会全自动启用document.open，文本文档的任何內容都是会被擦掉，由于载入文本文档的文本文档流早已关掉，换句话说，document.close()早已被全自动启用；

能够数次启用Write()来逐渐创建新文本文档的內容；传送给write的內容很有可能会被缓存文件，因此一旦载入数据信息，提议启用document.close()来完毕载入编码序列，进而告知HTML在线解析文本文档早已到文档的结尾，载入的数据信息将被分析到Document Structure Model (DOM)中。这时，分析应当进行，新文本文档应当表明出去。

btn.onclick = function(){ document.open(); // 能够省去document.write("调用了全部网页页面"); document.close();}

这时，假如在close()方式以后启用write()方式，全部新页面的信息将被调用，比如:

// 在onclick事故处理涵数中重新加上document.write("文本文档又被调用了");

留意:系统软件建立的文本文档流不可以关掉。如果我们在全局性自然环境中立即实行close()方式，会看到它都没有一切功效。缘故是系统软件建立的文本文档流没法关掉，大家只有关掉自身开启的文本文档流。

新页面也是这般；

var oNewWin=window.open("about:blank","newwindow","width=400,width=200");oNewWin.document.open();oNewWin.document.write("

新页面

");oNewWin.document.write("这是一个新页面");oNewWin.document.close();

应用write()方式时，最好是写一次；

var newWin = null;function makeNewWin(){ newWin = window.open("about:blank","newWin","width=400,height=300");}var btn = document.getElementById("btn");btn.onclick = function(){ // 假如newWin不会有或已关掉，再度开启 if(!newWin || newWin.closed) makeNewWin(); newWin.focus(); var title = "零点程序猿"; var newStr = ""; newStr = ""; newStr = "" title ""; newStr = ""; newStr = "

零程序猿

"; newStr = "这也是內容"; // 把body拆分为，不然会抛出异常 newStr = ""; newWin.document.write(newStr); newWin.document.close();}

document.open()的取代使用方法:

Open()方式有两个主要参数，英语的语法是document.open(种类，更换)，比如:

document.open("text/html","replace");

Type特定要载入的数据资料的MIME种类，初始值为“text/html”，replace(假如设定，数值字符串数组“replace”)特定新文本文档承继父文本文档的历史时间内容；

应用open()方式，历史时间内容会在IE中转化成，而不容易在别的电脑浏览器中转化成，因此这类使用方法只能在IE中合理。假如特定了更换主要参数，IE将不容易转化成历史时间内容，即父文本文档的纪录将被遮盖。

这类方式已经被舍弃；

含有3个主要参数的Open()方式是Window.open()的别称；

var doc = document.open("https://www.zeronetwork.cn/",","width=400;");// 开启新页面console.log(doc); // Windowdoc.document.write("

零程序猿

"); // 调用doc.document.close();// doc.close(); // 会关闭程序

外界資源的动态性载入:

应用write()和writeln()方式，还能够动态性载入外界資源，如Javascript文档，但要留意不可以立即包括字符串数组“”，由于会造成编码分析有误；

document.write("" "");// 或是document.write("" "");

这类方式常见于第三方的广告宣传和统计分析作用。

为什么不立即用标识，立即用动态性载入？缘故有二:

第一，脚本制作的URL不可以写死，例如动态性加上一些主要参数，例如客户机器设备的屏幕分辨率，当今网页的URL，避免缓存文件的时间格式等。这种主要参数只有先根据JS获得，随后是中国常用的网址统计代码:

var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape(""));

往往用write()方式替代原素，是为了更好地用JS来确定是用http或是https协议书。

除此之外，很有可能必须载入另一个脚本文件或在脚本制作中置入JS內容，很有可能会改动网页內容，这种实际操作只必须由第三方维护保养，不用由你的网站运营；

在具体开发设计中，write()并不常见。innerHTML特性和别的DOM技术性为向文本文档加上內容带来了更强的方式。比如，您还可以应用innerHTML輸出內容:

var mydiv = document.getElementById("mydiv");mydiv.innerHTML = "

零程序猿

给予互联网前面课程内容。

";// 调用body内全部內容document.body.innerHTML = "

零程序猿

给予互联网前面课程内容。

";包裝一个目标，类似write()和close()方式：// 为设定原素的innerHTML界定简易的"流式的"APIfunction ElementStream(elt){ if(typeof elt === "string") elt = document.getElementById("elt"); this.elt = elt; this.buffer = ";}// 联接全部的主要参数，加上到缓存文件中ElementStream.prototype.write = function(){ this.buffer = Array.prototype.join.call(arguments, ");};// 相近write()，仅仅多提升了回车符ElementStream.prototype.writeln = function(){ this.buffer = Array.prototype.join.call(arguments, ") "\n";};// 从缓存设置原素的內容，随后清除缓存文件ElementStream.prototype.close = function(){ this.elt.innerHTML = this.buffer; this.buffer = ";}var mydiv = document.getElementById("mydiv");var elt = new ElementStream(mydiv);elt.write("

零程序猿

");elt.writeln("

王维

");elt.close();