HTML DOM
1、定义：是关于如何获取、修改、添加或删除 HTML 元素的标准。
定义了访问和操作HTML文档的标准。
DOM：Document Object Model（文档对象模型）。
*HTML的标准对象模型。
*HTML的标准编程接口。
*W3C标准。
2、HTML DOM节点：HTML文档中所有内容都是节点
*整个文档是一个文档节点
*每个 HTML 元素是元素节点
*HTML 元素内的文本是文本节点
*每个 HTML 属性是属性节点
*注释是注释节点
3、节点父、子和同胞
同胞：拥有相同父节点的子节点。
根：顶端节点。除根以外，每个节点都有父节点。
4、 常用的HTML DOM方法
getElementById():返回带有指定ID的元素
appendChild(node)：插入新的子节点（元素）
removeChild(node)：删除子节点（元素）
常用的HTML DOM属性（元素）
innerHTML：节点（元素）的文本值
parentNode：节点（元素）的父节点
childNodes：节点（元素）的子节点
attributes：节点（元素）的属性节点
5、一些DOM对象方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
6、HTML DOM属性
nodeName属性：规定节点的名称。
*nodeName是只读的。
*元素节点的nodeName与标签名相同。
*属性节点的nodeName与属性名相同。
*文本节点的nodeName始终是#text。
*文档节点的nodeName始终是#document。
nodeValue属性：规定节点的值。
*元素节点的nodeValue是undefined或null。
*文本节点的nodeValue是文本本身。
*属性节点的nodeValue是属性值。
nodeType属性：返回节点的类型。nodeType是只读的。
元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9
7、HTML DOM访问 - 查找HTML元素
*getElementById():返回带有指定ID的元素;
*getElementsByTagName():返回带有标签名的所有元素;
*getElementsByClassName():返回带有相同类名的所有HTML元素;
8、HTML DOM修改 - 改变元素、属性、样式和事件
*改变 HTML 内容
document.getElementById("p1").innerHTML = "hello";
*改变 CSS 样式
document.getElementById("p2").style.color = "blue";
*改变 HTML 属性
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>
*创建新的 HTML 元素
//往<div>中添加HTML元素（作为最后一个子元素进行添加）
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
//在para，child前添加
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
*删除已有的 HTML 元素
//删除元素必须知道父元素和子元素
<div id = "div1">
<p id="p1">This is a paragraph.</p>
<p id ="p2">Thi is a another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
*改变事件（处理程序）:
<input type ="blue" onclick = "document.body.style.backgroundColor = 'lavender';"
value = "改变背景色"> //点击按钮改变背景色
9、HTML DOM事件 - HTML DOM 允许 JavaScript 对 HTML 事件作出反应
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
onload和onunload事件：
用户进入或离开页面时，会触发onload和onunload事件。
onload和onunload事件可用于处理cookies。
<body onload = "checkCookies()">
<script>
function checkCookies(){
if(navigator.cookiesEnabled ==true) {alert("Cookies are enabled")}
else {alert ("Cookies are not enabled")}
}
</script>
onchange事件：
onchange事件常用于输入字段的验证。
//将文本信息的小写转换成大写
<script>
function myFunction()
{
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
请输入你的英文名：<input type="text" id="fname" οnchange="myFunction()">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
</body>
onmouseover 和 onmouseout 事件
用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。
首先当某个鼠标按钮被点击时，触发 onmousedown 事件，
然后，当鼠标按钮被松开时，会触发 onmouseup 事件，
最后，当鼠标点击完成时，触发 onclick 事件。
<div
οnmοusedοwn="mDown(this)"
οnmοuseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>
10、HTML DOM导航 - 能够使用节点关系在节点树中导航
节点列表：
getElementsByTagName()返回节点列表。节点列表是一个节点数组。
.length：节点列表长度
//通过数组访问方式访问第二个节点
var x=document.getElementsByTagName("p");
y = x[1];
DOM 根节点
这里有两个特殊的属性，可以访问全部文档
*document.documentElement - 全部文档
*document.body - 文档的主体
扫一扫
362
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
