document语法与DOM基本语法_document 语法-CSDN博客

本文链接：https://blog.csdn.net/qh075/article/details/127113872

Document 对象集合

集合	描述
[all]	提供对文档中所有 HTML 元素的访问。
[anchors]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
[forms]	返回对文档中所有 Form 对象引用。
[images]	返回对文档中所有 Image 对象引用。
[links]	返回对文档中所有 Area 和 Link 对象引用。

Document 对象属性

属性	描述
body	提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

Document 对象方法

方法	描述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName(）	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

DOM：宿主对象

整个文档:document(文档节点)

一个元素(标签):element(元素节点)

元素中的文本:text(文本节点)

元素的属性:attribute(属性节点)

注释:comment(注释节点)

 var str=prompt("请输入");相当于input

对象的 HTML DOM 树

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

查找 HTML 元素

方法	描述
document.getElementById(id)	通过元素 id 来查找元素,id是个大小敏感的字符串,返回的是一个元素对象。
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName("类名")	通过类名来查找元素
document.querySelector("选择器")	根据指定选择器返回第一个元素对象
document.querySelectorAll("选择器")	根据指定选择器返回

 1.<body>
     <div id="time">2019-9-9</div>
     <script>
         var timer=document.getElementByld(id);
         console.log(timer);-> <div id="time">2019-9-9</div>
         console.log(typeof timer);->object
         console.dir打印我们返回的元素对象，更好的查看里面的元素方法
         console.dir(timer);->div#time
 </script>
 2.
 <body>
     <ul>
         <li>生栋覆屋</li>
         <li>生栋覆屋</li>
         <li>生栋覆屋</li>
         <li>生栋覆屋</li>
         <li>生栋覆屋</li>
     </ul>
     <script>
         var lis=document.getElementByTagName("li");
         console.log(lis);->生栋覆屋,生栋覆屋,生栋覆屋,生栋覆屋,生栋覆屋.
         2.我们一次打印数组中元素，用遍历方法
         for(var i=0;i<lis.length;i++){
             console.log(lis[i]);
         }
         3.如果页面只有一个元素，返回的还是伪数组
         4.如果页面没有元素返回的是空的伪数组的形式
         5.获取某个元素(父元素)内部所有指定标签的子元素；
           父元素必须是单个元素，获取时不包括自己
           element.getElementsByTagName("标签名");
           var ol=document.getElementsByTagName("ol");
           console.log(ol.getElementsByTagName("li"));->报错
           console.log(ol[0].getElementsByTagName("li"));->....
 3.
 <body>
     <div class="box">盒子1</div>
     <div class="box">盒子2</div>
     <div id="nav">
     <ul>
         <li>首页</li>
         <li>产品</li>
 </div>
 <script>
     1.根据类名获得某些元素的集合
     var boxs=document.getElementsByClassName("box");
     console.log(boxs);->[div.box,div.box]
     2.返回指定选择器的第一个元素对象
     var firstbox=document.querySelector('.box');
     console.log(firstBox);-><div class="box">盒子1</div>
     
     var nav=document.querySelector('#nav');
     console.log(nav);  -><div id="nav"></div>
     
     var li=document.querySelector("li");
     console.log(li);-><li>首页</li>
     3.返回指定选择器的所有元素集合
     var allBox=document.querySelectorAll(".box");
     console.log(allBox)->[div.box,div.box]
 </script>

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事件处理程序

查找 HTML 对象

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有 <a> 元素。	1
document.applets	返回所有 <applet> 元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回 body元素 var bodyEle=document.body; console.log(bodyEle)-><body><script>..</script></body> console.dir(bodyEle);->body...	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回 html元素 var htm=document.documentElement; console.log(htm)->标签元素...	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有 <embed> 元素	3
document.forms	返回所有 <form> 元素	1
document.head	返回 <head> 元素	3
document.images	返回所有 <img> 元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有 <area> 和 <a> 元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有 <script> 元素	3
document.strictErrorChecking	返回是否强制执行错误检查	3
document.title	返回 <title> 元素	1
document.URL	返回文档的完整 URL	1