1 定义
HTML DOM是HTML Document Object Model的缩写,称为文档对象模型。
HTML DOM 定义了一系列标准的对象,以及访问和处理 HTML 文档的标准方法,将网页中的每个元素都看作一个对象 。
通过 HTML DOM, JavaScript可访问HTML文档的所有元素和属性。
2 Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象
通过使用 Document 对象,脚本可以对 HTML 页面中的所有元素进行访问
– document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
DOM:文档对象模型,JS将HTML文档中的所有元素以一个树形的目录结构描述
3 查找元素节点的方法
getElementById()
var XX = document.getElementById(“ID”);
通过指定的 ID 来返回元素节点
如果 ID 值错误,则返回 null
getElementsByTagName() (返回的是数组, 需要指定下标到指定元素)
根据指定的标签名称返回所有的元素
如果标签名称错误,则返回 长度为 0 的节点列表
getElementsByName()(返回的是数组, 需要指定下标到指定元素)
根据指定的name属性值返回所有的元素
如果标签名称错误,则返回 长度为 0 的节点列表
getElementsByClassName()(返回的是数组, 需要指定下标到指定元素)
根据指定的class属性值返回所有的元素,该方法是HTML5 新增的DOM API。IE8以下不支持
返回一个节点列表
使用节点列表的 length 属性获取个数
[index]:定位具体的元素
4.修改元素节点的内容和样式
innerHTML 、src、href属性
style 属性 :
node.style.color
node.style.fontSize
className 属性 :
代码:
var o = document.getElementById("p1");
o.style.color = “red”;
o.style.fontSize = 20;
o.className = “样式类名称”;
4.1通过className 加载类选择器样式 不能通过 class 属性来修改
4.2 通过style 属性进行修改style.js对应的样式属性 要求把 css中的样式属性 的 中划线‘——’去掉 然后 后面的字母变大写
要么你就使用 类选择器加载。
4.3 还可以通过 style.cssText="这里就是把样式表中的大阔号去掉之后的内容";
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"> //类选择器加载
.div{
color:blue;
}
</style>
<script type="text/javascript">
function loadContent(){
var content = document.getElementById('123');
// alert(content);
content.innerHTML = '123';
}
function changeCss(){
var img = document.getElementById('123');//根据ID获得元素
// img.className = 'div'; //方式一:类选择器
// img.class = 'div'; //错误的方式:错误 语法不报错
img.style.width = '200px';
img.style.height = '100px';
img.style.border = '2px solid red';
// 方式二:JS语法 backgroundColor 对应 CSS语法 background-color:
img.style.backgroundColor = 'RGB(111,111,111)';
img.style.cssText =
//方式三:把样式表中的{}去掉的内容
'width:200px; height:100px; border:2px solid; color:blue;';
}
</script>
</head>
<body>
<input type="button" value="加载内容" onclick="loadContent()" />
<input type="button" value="点击切换样式" onclick="changeCss()">
<div id="123" class='div'></div>
</body>
</html>
5 根据层次查找元素节点
parentNode 、firstChild 和 lastChild
遵循文档的层次结构,查找单个节点
childNodes
遵循文档的层次结构,查找多个节点
nodeName,nodeValue ,nodeType
nodeName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
nodeValue 元素节点返回null;属性节点返回属性值;文本节点返回内容
nodeType 1表示元素节点;2表示属性节点;3表示文本节点
attributes 获取所有的属性节点 然后把属性节点作为值存入一个Map结构中以属性名作为 key
遵循文档的层次结构,查找多个属性
代码示例:
其中: 元素节点
id=‘div1’ 属性节点
hello world 文本节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function NodeOperate() {
var div = document.getElementById('divId'); //根据ID获取div元素
alert('div的nodeName: ' + div.nodeName); //元素节点返回标签名 div
alert('div的nodeValue: ' + div.nodeValue);//元素节点返回null
alert('div的nodeType: ' + div.nodeType); //元素节点返回1
var attrs = div.attributes;//获得元素的属性
alert(attrs);//object NamedNodeMap
var att = attrs.getNamedItem('id');//等同于 var att = attrs['id'];
alert(att);//object Attr
alert('att的nodeName: ' + attrs.getNamedItem('id').nodeName); //属性节点返回属性名 id
alert('att的nodeValue: ' + attrs.getNamedItem('id').nodeValue);//属性节点返回属性值 divId
alert('att的nodeType: ' + attrs.getNamedItem('id').nodeType); //2表示属性节点 2
//获取文本途径
//方式一: 元素.innerHTML
alert("文本信息1:"+div.innerHTML);
//方式二: 元素.孩子节点.nodeValue
alert("文本信息2:"+div.firstChild.nodeValue);
//方式三:方式二变形
alert("文本信息3:"+div.childNodes[0].nodeValue);
}
</script>
</head>
<body>
<input type="button" value="节点操作" onclick="NodeOperate()"> </input>
<div id="divId" class='divClass'>hello world</div>
</body>
</html>
实例:
<select id="s1">
<option value="101">娜英</option>
<option value="102">周杰伦</option>
<option value="103">哈林</option>
<option value="104">汪峰</option>
</select>
var s1 = document.getElementById("s1");
alert(s1.childNodes.length);//7 `在这里插入代码片`
var o1 = s1.firstChild;
6 元素节点的定义增删
创建新的元素节点
document.createElement(elementName)
elementName:要创建的元素标签名称
返回新创建的节点
代码:
var newNode = document.createElement("input");
newNode.type = "text";
newNode.value = "mary";
newNode.style.color = "red";
添加新的元素节点
parentNode.appendChild(newNode)
追加:新节点作为父节点的最后一个子节点存在
parentNode.insertBefore(newNode,refNode)
refNode:参考节点,新节点位于此节点之前
删除元素节点
删除某个子节点 : parentNode.removeChild(childNode)
function deleteNode()
{
var delNode = document.getElementById("a1");
delNode.parentNode.removeChild(delNode);
}
删除多个子节点 :
function removeAll() {
//方式一 循环删除 只删除第一个元素
var sel1 = document.getElementById('sel1');
var list = sel1.childNodes;
for (var i = 0; i < list.length; i++) {
sel1.removeChild(list[0]);
list --;
}
//方式二 修改属性长度
var sel1 = document.getElementById("sel1");
var options = sel1.options;
//alert(options.length);
options.length=0;
}
综合Demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function remove() {//删除单个节点
var sel1 = document.getElementById('sel1');
var A = document.getElementById('A');
sel1.removeChild(A);
}
function add() {
var sel = document.getElementById('sel1');
var opt = document.createElement('option');
opt.innerHTML = 'ADD';
sel.appendChild(opt)
}
function removeAll() {
//方式一 循环删除 只删除第一个元素
var sel1 = document.getElementById('sel1');
var list = sel1.childNodes;
for (var i = 0; i < list.length; i++) {
sel1.removeChild(list[0]);
list --;
}
//方式二 修改属性长度
var sel1 = document.getElementById("sel1");
var options = sel1.options;
//alert(options.length);
options.length=0;
}
</script>
</head>
<body>
<input type="button" value='增加节点' onclick='add()'>
<input type="button" value='删除节点' onclick='remove()'>
<input type="button" value='删除节点全部' onclick='removeAll()'>
<select id='sel1'>
<option id='A'>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
</body>
</html>