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；
<!-- 这是一个comment -->
<html lang="en">
<head>
<title>document</title>
</head>
<body>
<script>
console.log(document.childnodes); // 使用ff查看 nodelist(3)
</script>
</body>
</html>documentelement属性：
返回文档直接子节点，始终指向html页面中的<html>元素，也就是文档的根元素，并且它一定是文档的根元素；
// 注意：在html中的第二行有可能是注释
console.log(document.childnodes[2]); // <html>
console.log(document.documentelement); // <html>
console.log(document.lastchild); // <html>借助这个只读属性，能方便地获取到任意文档的根元素；
body属性：
作为htmldocument的实例，document对象还有一个body属性，直接指向<body>；
console.log(document.body);对于一个拥有<frameset>元素的文档来说，返回的是最外层的<frameset>元素；
另外，该属性是可写的，且为该属性赋的值必须是一个<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); // newbodyhead属性：
指向<head>元素，这个document对象扩展的一个属性，类型为htmlheadelement；
如果有多个<head>元素，则返回第一个；
document.head 是个只读属性，为该属性赋值只会静默失败，如果在严格模式中，则会抛出typeerror异常；
需要注意的是，如果文档源代码中未显式的包含<head>和<body>元素，浏览器将隐式的创建它们；
doctype属性：
该属性是documenttype 类型，表示了一个包含文档类型的节点对象，指向<!doctype>标签；
文档当中最多只有一个documenttype元素；
console.log(document.doctype); // <!doctype html>
console.log(document.doctype.nextsibling); // <html>
console.log(document.childnodes[0]); // <!doctype html>如果存在文档声明，则将其作为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<arguments.length; i++){
var id = arguments[i];
var elt = document.getelementbyid(id);
if(elt == null)
throw new error("no element with id:" + id);
elements[id] = elt;
}
return elements;
}
console.log(getelements("mydiv","mylist"));
console.log(getelements("mydiv","mylist")["mydiv"]);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); // nullgetelementsbyname()方法：
返回给定name 属性的所有元素nodelist集合对象；
var mytexts = document.getelementsbyname("mytext");
console.log(mytexts); // dom2.html:17 nodelist(2) [p, div]该方法定义在htmldocument类中，而不在document类中，所以它只针对html文档可用，也就是只有htmldocument类型才有的方法，在xml文档中不可用；
<fieldset>
<legend>选择你最喜欢的城市</legend>
<ul>
<li><input type="radio" value="北京" name="city" id="beijing" />
<label for="beijing">北京</label></li>
<li><input type="radio" value="南京" name="city" id="nanjing" />
<label for="nanjing">南京</label></li>
<li><input type="radio" value="蚌埠" name="city" id="bengbu" />
<label for="bengbu">蚌埠</label></li>
</ul>
</fieldset>
<script>
var citys = document.getelementsbyname("city");
console.log(citys);
</script>该方法返回的是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对象也是类似的；比如，为<form>、<img>、<iframe>、<applet>、<embed>或<object>元素设置name属性，即在document对象中创建以此name属性值为名字的属性；
<form name="myform"></form>
<script>
console.log(document.myform);
</script>即使如此，建议不要用这种方式来获取元素，最好还是显式的使用getelementsbyname()方法；
getelementsbytagname()方法：
该方法是通过标签名来获取元素，其接收一个参数，即要取得元素的标签名；返回拥有零个或多个元素的htmlcollection集合对象，其是动态集合，与nodelist非常类似；；
var spans = document.getelementsbytagname("span");
console.log(spans); // htmlcollection其拥有length属性，可以通过方括号或者item()方法来访问htmlcollection对象中的项；还拥有一个nameditem()方法，该方法可以通过元素的name属性取得集合中的项，但可以简写为使用方括号访问；即如果是数值，则调用item()，如果是字符串索引，就调用nameditem()；
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);文档信息：
作为htmldocument的一个实例，document对象还有一些标准的document对象所没有的属性；这些属性提供了document对象所表现的网页的一些信息；
从bom角度来看document对象是window对象的属性，由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息，可以认为document即为加载的html文档；
document.title：包含着<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：允许javascript读写的http cookie的特殊属性；
location：与window对象的location属性引用同一个location对象；
url：包含页面完整的url；一般情况下，该属性的值与location.href 属性相同；但不包含location对象的动态变化，即在 url 重定向发生的时候，这个url属性保存了文档的实际url，不会发生变化，而 location.href会发生变化；location.href 是可写的，document.url是只读的；
console.log(document.url);
console.log(location.href);
document.url = "demo.html"; // 无效
console.log(document.url);
// location.href = "demo1.html"; // 跳转referrer：来源页面的url（链接到当前页面的那个页面），如果没有来源，referrer为空字符串；该属性是只读的；
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<args.length; i++){
if(args[i].substring(0,2) == "q="){
document.write("<h2>搜索的是：</h2>");
keys = args[i].substring(2).split("+");
for(var k in keys){
document.write(decodeuricomponent(keys[k]) + "<br>");
}
break;
}
}
}domain属性：获取或设置当前文档的域名；
该属性允许当web页面之间交互时，相同域名下互相信任的web服务器之间协作放宽同源策略安全限制，其是可读的，但有安全限制，即不能为domain赋任意值；
不能将该属性设置为url中不包含的域；
// ff提示“the operation is insecure.”，chrome提示不是127.0.0.1的子域名
// document.domain = "www.zeronetwork.cn"; // 异常
console.log(document.domain);document对象的集合：
除了属性和方法，document对象还有一些特殊的集合；这些集合都是htmlcollection对象，为访问文档的常用部分提供了快捷方式，包括：
document.anchors：包含文档中所有带name特性的<a>元素；这个属性已经从web标准中删除了，但浏览器还支持，所以尽量不要再使用；
<!-- link.html页面 -->
<h1>零点程序员</h1>
<h2><a name="one">web前端开发</a></h2>
<div style="height: 1000px;background-color: purple;">div</div>
<h2><a name="two">后端开发</a></h2>
<div style="height: 1000px;background-color: green;">div</div>
<h2><a name="three">苹果开发</a></h2>
<div style="height: 1000px;background-color: blue;">div</div>
<!-- 主页面 -->
<p>
<input type="button" value="web前端开发" onclick="jump('one')" />
<input type="button" value="后端开发" onclick="jump('two')" />
<input type="button" value="苹果开发" onclick="jump('three')" />
</p>
<script>
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("锚不存在")
}
}
</script>document.links：包含文档中所有带href特性的<a>元素或<area>元素；
var mydiv = document.getelementbyid("mydiv");
var links = document.links;
for(var i=0,len=links.length; i<len; i++){
var anode = document.createelement("a");
anode.href = links[i].href;
var href = document.createtextnode(links[i].innertext);
anode.appendchild(href);
mydiv.appendchild(anode);
}打开外链进行提醒：
var links = document.links;
for(var i=0,len=links.length; i<len; i++){
var link = links[i];
link.addeventlistener("click",function(e){
e.preventdefault();
if(e.target.host !== location.host)
jump(e.target.innertext, e.target.href);
else
location.href = e.target.href;
},false);
}
function jump(title,href){
var div = document.createelement("div");
div.id = "jumpdiv";
document.body.appendchild(div);
var str = document.createtextnode("你要访问的：" + href + "不属于本网站，你要继续访问吗？");
div.appendchild(str);
var ago = document.createelement("a");
ago.href = href;
ago.target = "_blank";
ago.appendchild(document.createtextnode("继续"));
div.appendchild(ago);
var aback = document.createelement("a");
aback.href = "javascript:void(0);";
aback.appendchild(document.createtextnode("关闭"));
aback.onclick = closejumpdiv;
div.appendchild(aback);
}
function closejumpdiv(){
var jumpdiv = document.getelementbyid("jumpdiv");
if(jumpdiv)
jumpdiv.parentnode.removechild(jumpdiv);
}document.applets：包含文档中所有的<applet>元素；
document.forms：包含文档中所有的<form>元素，与
document.getelementsbytagname(“form”)得到的结果是相同的；
<form name="myform">
<!-- id也可为以-->
<input type="text" id="username" />
</form>
<form name="yourform"></form>
<script>
console.log(document.forms); // htmlcollection
console.log(document.forms.myform);
console.log(document.forms[0]);
console.log(document.forms["myform"]);
console.log(document.forms.myform.username);
</script>document.embeds：包含文档中所有的<embeds>元素；
document.plugins：包含文档中所有的插件；注意和navigator.plugins的区别；
console.log(document.plugins); // htmlcollection
console.log(navigator.plugins); // pluginarraydocument.images：包含文档中所有的<img>元素实时集合，集合中的每个元素代表了一个image元素的htmlimageelement，与
document.getelementsbytagname(“img”)得到的结果是相同的；
document.scripts：返回一个htmlcollection对象，包含了当前文档中所有<script>元素的集合；
document.all：只读属性，返回一个htmlallcollection，包含了页面上的所有元素；已从web标准中删除，但是浏览器都支持，但建议不要使用；与
document.getelementsbytagname(“*”)得到的结果基本相同的；
console.log(document.all); // htmlallcollection
console.log(document.getelementsbytagname("*")); // htmlcollection
console.log(document.all[9]);
document.all[9].innerhtml = "零点程序员";
// id或name为"mydiv"的元素,但是有区别的,为name的元素只是插入text
document.all["mydiv"].innerhtml = "<h2>零点程序员</h2>"; 以上这些集合始终都可以通过htmldocument对象访问到，而且，它们都是动态的；但现在已经被
document.getelementsbytagname()所取代，部分已经废弃不应该再使用，但是仍然常常被使用，因为他们使用起来很方便；
文档写入：
document对象，可以将文本字符串写入文档流中；
write()与writeln()方法：
这两个都接受一个字符串参数，即要写入到输出流中的文本；write()会原样写入，writeln()则会在字符串的末尾添加一个换行符（\n）；
这两个方法会将其字符串参数连接起来，然后将结果字符串插入到文档中调用它们的脚本元素的位置；
document.write("<h1>" + document.title + "</h1>");
document.write("<strong>" + (new date()).tostring() + "</strong>");不光输出内容，还会解析为dom元素；
参数可以是多种形式，如：
// 部分替换为writeln()方法
var username = "wangwei";
document.write("我的名字：" + username + "<br/>");
document.write("sum:" + (5 + 4));
document.write("<ul>");
document.write("<li>html</li>","<li>css</li>","<li>javasc </li>");
document.write("</ul>")
var arr = ["<p>zeronetwork</p>","<p>wangwei</p>","<p>web</p>"];
document.write(arr.join(""));
function func(){
return "func";
}
document.write(func + "<br>");
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()方法，则不需要用到这两个方法，因为文档此时是打开状态；向一个已经加载完成的文档写入数据时，会自动调用 document.open，并且会擦除该文档的所有内容，因为已经加载完成的文档，它的文档流已经关闭，就是已经自动调用了document.close()；
可以多次调用write()来逐步建立新文档的内容；传递给write的内容可能缓存起来，所以一旦完成了数据写入，建议调用 document.close()来结束该写序列，以告诉html解析器，文档已经达到了文件的末尾，写入的数据会被解析到文档结构模型（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("<h1>新窗</h1>");
onewwin.document.write("<div>这是一个新窗口</div>");
onewwin.document.close();在使用write()方法时，最好一次性写入；
<input type="button" id="btn" value="写入">
<script>
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 = "<!doctype html>";
newstr += "<html><head>";
newstr += "<title>" + title + "</title></head>";
newstr += "<body>";
newstr += "<h1>零点程序员</h1>";
newstr += "<div>这是内容</div>";
// 把body拆分成</b和ody>，否则会抛出异常
newstr += "</b" + "ody></html>";
newwin.document.write(newstr);
newwin.document.close();
}
</script>document.open()另类的用法：
2个参数的open()方法，语法为document.open(type, replace)，如：
document.open("text/html","replace");type指定了所需写入的数据的mime类型，默认值为”text/html”，replace（如有设置，值为一个字符串“replace”）指定了新文档从父文档继承历史条目；
使用open()方法，在ie中会产生历史条目，其他浏览器不会产生，因此这种用法只会在ie中有效果；而如果指定了replace参数，ie就不会产生历史条目，也就是父文档的记录被覆盖了；
这种形式现在已经弃用；
3个参数的open()方法，是window.open()的一个别名；
var doc = document.open("https://www.zeronetwork.cn/","","width=400;");// 打开新窗口
console.log(doc); // window
doc.document.write("<h1>零点程序员</h1>"); // 重写
doc.document.close();
// doc.close(); // 会关闭窗口动态加载外部资源：
使用write()和writeln()两个方法，还可以动态加载外部资源，如javascript文件等，但要注意，不能直接包含字符串“</script>”，因为会导致代码不能正确的解析；
document.write("<script type=\"text/javascript\" src=\"file.js\">" + "<\/script>");
// 或者
document.write("<script type=\"text/javascript\" src=\"file.js\">" + "</scr" + "ipt>");这种方法经常在广告和统计功能的第三方中使用；
为什么不直接使用<script>标签，而直接使用动态载入呢？原因有两个：
一是脚本的url不能写死，比如要动态添加一些参数，用户设备的分辨率啊，当前页面 url 啊，防止缓存的时间戳之类的，这些参数只能先用 js 获取到，再比如国内常见的网站统计代码：
<script>
var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3cspan id='cnzz_stat_icon_1279580898'%3e%3c/span%3e%3cscript src='" +
cnzz_protocol + "s9.cnzz.com/stat.php%3fid%3d1279580898' type='text/javascript'%3e%3c/script%3e"));
</script>它之所以使用write()方法，而不使用<script>元素，就是为了先用 js 判断出该用http还是https 协议；
另外，有可能需要在脚本里加载另外一个脚本文件或嵌入的js内容有可能会修改页面内容，而这些操作只需要第三方自己维护，不需要自己的网站去维护；
在实际开发中，write()并不常用，innerhtml属性和其他dom技术提供了更好的方法来为文档增内容；比如，可以利用innerhtml来输出内容：
var mydiv = document.getelementbyid("mydiv");
mydiv.innerhtml = "<h1>零点程序员</h1><p>开设了web前端课程</p>";
// 重写body内所有内容
document.body.innerhtml = "<h1>零点程序员</h1><p>开设了web前端课程</p>";
包装一个对象，类似于write()和close()方法：
// 为设置元素的innerhtml定义简单的"流式"api
function 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("<h1>零点程序员</h1>");
elt.writeln("<p>王唯</p>");
elt.close();