Html学习笔记
HTML DOM
HTML
文档对象模型（HTML Document Object Model）定义了（js）访问和处理HTML 文档的标准方法。
节点
根据DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
•整个文档是一个文档节点(document)
•每个HTML 标签是一个元素节点
•包含在HTML 元素中的文本是文本节点
•每一个HTML 属性是一个属性节点
•注释属于注释节点
节点彼此都有等级关系。
节点树
除文档节点之外的每个节点都有父节点(parentNode)。
大部分元素节点都有子节点(firstChild,lastChild)。比方说，
节点有一个子节点：
节点。<title> 节点也有一个子节点：文本节点"DOM Tutorial"。</p><p>当节点分享同一个父节点时，它们就是同辈（同级节点）nextSibling,previousSibling。</p><p>访问节点</p><p>你可通过若干种方法来查找您希望操作的元素：</p><p>•通过使用getElementById() 和getElementsByTagName() 方法</p><p>•通过使用一个元素节点的parentNode、firstChild 以及lastChild 属性getElementById() 可通过指定的ID 来返回元素：document.getElementById("ID"); getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。</p><p>document.getElementsByTagName("标签名称");</p><p>•document.documentElement</p><p>•document.body</p><p>第一个属性可返回存在于XML 以及HTML 文档中的文档根节点。</p><p>第二个属性是对HTML 页面的特殊扩展，提供了对<body> 标签的直接访问。</p><p>var x=document.getElementById("maindiv");</p><p>x.parentNode.removeChild(x);</p><p>节点信息</p><p>每个节点都拥有包含着关于节点某些信息的属性。这些属性是：•nodeName（节点名称）</p><p>•nodeV alue（节点值）</p><p>•nodeType（节点类型）</p><p>nodeName 属性含有某个节点的名称。</p><p>•元素节点的nodeName 是标签名称</p><p>•属性节点的nodeName 是属性名称</p><p>•文本节点的nodeName 永远是#text</p><p>•文档节点的nodeName 永远是#document nodeValue</p><p>对于文本节点，nodeValue 属性包含文本。</p><p>对于属性节点，nodeValue 属性包含属性值。</p><p>nodeV alue 属性对于文档节点和元素节点是不可用的。nodeType</p><p>nodeType 属性可返回节点的类型。</p><p>JavaScript 对象Window 对象</p><p>Window 对象是JavaScript 层级中的顶层对象。</p><p>Window 对象代表一个浏览器窗口或一个框架。</p><p>Window 对象会在<body> 或<frameset> 每次出现时被自动创建。</p><p>1.方法</p><p>blur()：让当前窗口失去焦点</p><p>alert()：弹窗</p><p>setInterval()</p><p>setTimeout()</p><p>clearInterval()</p><p>clearTimeout()</p><p>close()：chrome可以直接关闭，ie会弹出提示，firefox不可用</p><p>focus()：键盘焦点给与窗口</p><p>moveBy()：相对于当前窗口位置移动指定像素</p><p>moveTo()：把窗口移动到指定位置</p><p>open()：打开一个新的浏览器窗口</p><p>Navigator 对象</p><p>Navigator 对象实际上是一个JavaScript 对象,而不是HTML DOM 对象。</p><p>Navigator 对象是由JavaScript runtime engine 自动创建的，包含有关客户机浏览器的信息。Screen 对象</p><p>Screen 对象实际上是JavaScript 对象，而不是HTML DOM 对象。</p><p>Screen 对象是由JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。History 对象</p><p>History 对象实际上是JavaScript 对象，而不是HTML DOM 对象。</p><p>History 对象是由JavaScript runtime engine 自动创建的，由一系列的URL 组成。这些URL 是用户在一个浏览器窗口内已访问的URL 。</p><p>Location 对象</p><p>Location 对象实际上是JavaScript 对象，而不是HTML DOM 对象。</p><p>Location 对象是由JavaScript runtime engine 自动创建的，包含有关当前URL 的信息。</p><p>Document 对象</p><p>Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。</p><p>Document 对象是Window 对象的一个部分，可通过window.document 属性来访问。</p><p>HTML对象</p><p>1.Anchor 对象</p><p>Anchor 对象代表一个HTML 超链接。在HTML 文档中<a> 标签每出现一次，Anchor 对象就会被创建。</p><p>2.Area 对象</p><p>Area对象用来设置图片的可点击区域。</p><p>3.body对象</p><p>Body 对象代表文档的主体(HTML body) 。</p><p>4.Document 对象</p><p>Document 对象代表整个HTML 文档，可用来访问页面中的所有元素。</p><p>Document 对象是Window 对象的一个部分，可通过window.document 属性来访问。</p><p>5.事件对象</p><p>Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。</p><p>事件通常与函数结合使用，函数不会在事件发生前被执行！</p><p>6.History 对象</p><p>History 对象实际上是JavaScript 对象，而不是HTML DOM 对象。</p>
</div>
</div>
</div>
</div>
</div>
<div id="rightcol" class="viewcol">
<div class="coltitle">相关文档</div>
<ul class="lista">
<li><a href="/doc/0917063737.html" target="_blank">HTML+CSS标签属性大全</a></li>
<li><a href="/doc/131868597.html" target="_blank">html-css</a></li>
<li><a href="/doc/2a5906074.html" target="_blank">html+css</a></li>
<li><a href="/doc/397025249.html" target="_blank">HTML5+CSS3课程标准</a></li>
<li><a href="/doc/397981372.html" target="_blank">实验一HTML、CSS网页制作实验</a></li>
<li><a href="/doc/3310128611.html" target="_blank">各种HTML+CSS网页效果代码分享</a></li>
<li><a href="/doc/3410641409.html" target="_blank">轻松学HTML+CSS之个人网站制作</a></li>
<li><a href="/doc/3110962691.html" target="_blank">html+css考试题</a></li>
<li><a href="/doc/3d12857360.html" target="_blank">案例1-HTML中使用css+div设计简单网页</a></li>
<li><a href="/doc/3d12996822.html" target="_blank">HTML_CSS测试题</a></li>
</ul>
<div class="coltitle">最新文档</div>
<ul class="lista">
<li><a href="/doc/0012052538.html" target="_blank">2014.12.9初四语文周周清</a></li>
<li><a href="/doc/0112052539.html" target="_blank">山东省人口与计划生育条例</a></li>
<li><a href="/doc/0112052540.html" target="_blank">《直线与方程》单元教学设计</a></li>
<li><a href="/doc/0312052542.html" target="_blank">成吉思汗手游装备怎么打星 装备打星技巧介绍</a></li>
<li><a href="/doc/0312052543.html" target="_blank">招商银行成立伦敦分行</a></li>
<li><a href="/doc/0312052544.html" target="_blank">语文：《管仲列传》课件(4)(苏教版选修《＜史记＞选读》)</a></li>
<li><a href="/doc/0312052545.html" target="_blank">新版PEP五年级英语上册三、四单元测试卷</a></li>
<li><a href="/doc/0512052549.html" target="_blank">产权制度与近代中国西部农地资源开发(1)</a></li>
<li><a href="/doc/011205255.html" target="_blank">演示文稿1《红楼梦》</a></li>
<li><a href="/doc/0512052550.html" target="_blank">部编人教版小学一年级语文上册影子</a></li>
</ul>
</div>
</div>
<script>
var did = "514424094";
var ext = 'doc';
var docId = '02rbzbbnfhd5jaoq9raa';
var totalPage = 29;
const pageNum = '29';
</script>
<div class="clearfloat"></div>
<div id="footer">
<div class="ft_info">
<a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br>
本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈
</div>
<script>foot()</script>
</div>
</body>
</html> 