一、DOM
1.DOM是文档对象模型（Document Object Model）的简称。当网页加载时，可以将结构化文档在内存中转换成对象的树。
简单的说DOM并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
DOM模型中的节点——文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：
- 元素节点：各种标签就是这些元素节点的名称，例如<p>、<ul>等
- 文本节点：文本节点总是被包含在元素节点的内部
- 属性节点：一般用来修饰元素节点就称之为属性节点。
二、DOM访问HTML的方式
DOM主要有两种方式来访问HTML。
- 根据ID访问HTML元素：通过document对象调用getElementById()方法来查找具有唯一id属性值的元素。
- 第一种方式
<title>无标题文档</title><style> ???</style> ???<script type="text/javascript"> ???function show(){ ???????var content1=document.getElementById(‘son1‘).innerText; ???????var content2=document.getElementById(‘grandson2‘).value; ???????var content3=document.getElementById(‘grandson3‘).value; ???????var content4=document.getElementsByClassName(‘grandson4‘).value; ???????alert(content1+"\n"+content2+"\n"+content3+"\n"+content4); ???} ???</script></head><body><div id="oldfather"> ???<div id="son1"> ???<span>我是div块</span> ???</div> ???<div id="son2"> ???<textarea name="" id="grandson2" cols="30" rows="10">好好学习，天天向上</textarea> ???</div> ???<div id="son3"> ???????<input type="text" id="grandson3" value="上我啊"> ???</div> ???<div id="son4"> ???????<input type="button" class="grandson4" value="访问三个元素的内容" onClick="show()"> ???</div></div></body></html> - 2.利用节点关系访问HTML元素。常用的属性和方法如下：
parentNode | 返回当前节点的父节点 |
previousSibling | 返回当前节点的前一个兄弟节点 |
nextSibling | 返回当前节点的后一个兄弟节点 |
childNodes | 返回当前节点的所有子节点 |
firstChild | 返回当前节点的第一个子节点 |
lastChild | 返回当前节点的最后一个子节点 |
getElementsByTagName(tagName) | 返回当前节点的具有指定标签名的所有子节点 |
<!doctype html><html><head><meta charset="utf-8"><title>使用节点关系查找HTML元素</title><style type="text/css"> ???/*以赵六为参照物*/ ???#n4{color:red} ???</style></head><body><ul id="names"> ???<li id="n1">张三</li> ???<li id="n2">李四</li> ???<li id="n3">王五</li> ???<li id="n4">赵六</li> ???<li id="n5">小红</li> ???<li id="n6">小明</li></ul><input type="button" value="父节点" onClick="showContent(current.parentNode)"><input type="button" value="第一个子节点" onClick="showContent(current.parentNode.firstChild.nextSibling)"><input type="button" value="上一个节点" onClick="showContent(current.previousSibling.previousSibling)"><input type="button" value="下一个节点" onClick="showContent(current.nextSibling.nextSibling)"><input type="button" value="最后一个子节点" onClick="showContent(current.parentNode.lastChild.previousSibling)"><input type="button" value="得到所有li的元素个数" onClick="showCount()"><script type="text/javascript"> ???var current=document.getElementById("n4"); ???function showContent(target){ ???????alert(target.innerHTML); ???} ???function showCount(){ ???????alert(document.getElementsByTagName("li").length); ???}</script></body></html>JS基础10-DOM访问HTML方式
原文地址：https://www.cnblogs.com/LuckyGJX/p/8654666.html