<一>.文档对象模型的简介
DOM(Document Object Model)是文档对象模型的简称,只关注浏览器文档部分,HTML文档每个成分都可以看做节点,即HTML文档核心操作为查看、新增、删除、替换节点,整个文档是一个文档节点,标签元素是一个元素节点,属性是一个属性节点,文本是一个文本节点,注释是一个注释节点,文档中每个节点都存在着联系,类似一张家族图谱。
<二>.dcoument对象常用属性
1.bgColor:文档背景色
2.fgColor:文档前景色
3.title:文档标题
<body>
<h3>我的一个HTML页面</h3>
<script>
document.title="我的一个HTML页面";
document.fgColor="red";
document.bgColor="blue";
</script>
</body>
<三>.document对象查找页面元素节点
1.getElementById():通过ID查找页面元素
2.getElementByName():通过name查找页面元素(返回一个数组,索引从0开始)
3.getElementByTagName():通过标签名查找页面元素(返回一个数组,索引从0开始)
4.getElementByClassName():通过类名查找页面元素(返回一个数组,索引从0开始)
<body>
<ul>
<li id="test">1</li>
<li class="thetest">2</li>
<li class="thetest">3</li>
</ul>
<input type="button" name="btn" value="1" />
<input type="button" name="btn" value="2" />
</body>
<script>
var test = document.getElementById("test");
var arr1 = document.getElementsByClassName("thetest");
var arr2 = document.getElementsByTagName("li");
var arr3 = document.getElementsByName("btn");
for (var i = 0; i < arr3.length; i++) {
document.write( arr3[i].value+"<br />");
}
</script>
<四>.document对象改变HTML
<1>.使用document对象改变HTML输出流: document.write("输出的内容")
<2>.使用document对象改变HTML内容:HTML对象.innerHTML = HTML内容
<3>.使用document对象改变HTML样式:HTML对象.style.属性名 = 属性值
<4>.使用document对象改变HTML属性:HTML对象.属性 = 属性值
<body>
<p id="thep"></p>
<img src= "../img/demo1.jpg" width="200px" height="50px"/>
<script>
//document对象改变输出流
document.write("改变HTML输出流内容");
//document对象改变HTML内容
document.getElementById("thep").innerHTML = "我是段落标签";
//document对象改变样式
document.getElementById("thep").style.fontSize = "20px";
//document对象改变属性值
document.getElementsByTagName("img")[0].src = "../img/demo2.jpg";
</script>
</body>
说明:每个HTML对象都有用于访问CSS的style属性,style对象中包含一系列与CSS对应的属性,style对象属性与CSS属性命名不同,style属性少了“ - ”,并且第二个单词开始首字母大写。例如CSS中background-color对应style中backgroundColor
<五>.DOM节点操作
<1>.如果不知道父元素的id、tag、name,可以通过元素在之间的关系来访问
<2>.节点属性
1.parentNode:当前节点的父节点
2.childNodes:当前节点的所有子节点(返回一个子节点数组)
3.firstNode:当前节点的第一个子节点
4.lastNode:当前节点的最后一个子节点
5.previousSibLing:当前节点的上一个兄弟节点
6.nextSibLing:当前节点的下一个兄弟节点
<body>
<div id="test">
<p>第一段落</p>
<p>第二段落</p>
</div>
<input type="button" value="子节点" onclick="theChild()"/>
<input type="button" value="父节点" onclick="theParent()"/>
<script>
function theChild(){
var div1 = document.getElementById("test");
var child = div1.childNodes;
for (var i = 0; i < child.length; i++) {
//nodeType==1表示元素节点,2表示属性节点,3表示文本节点
if(child[i].nodeType==1){
child[i].style.color = "red";
}
}
}
function theParent(){
var div2 = document.getElementById("test");
var thebody = div2.parentNode;
thebody.style.backgroundColor = "pink";
}
</script>
</body>
<3>.动态添加节点和删除节点
1.createElement(): 创建新节点,并使用appendChild()将节点添加到子节点末尾
2.removeElement():删除子节点,只能从父节点中删除子节点
<body>
<input type="button" value="添加节点" onclick="insertNode()" />
<input type="button" value="删除节点" onclick="delNode()" />
<p>
<h3>请选择颜色:</h3>
<select id="sel" onchange="changeColor(this)"></select>
</p>
<script>
var sel = document.getElementById("sel");
function insertNode() {
//红色
var op1 = document.createElement("option");
op1.value = "red";
op1.innerHTML = "红色";
sel.appendChild(op1)
//蓝色
var op2 = document.createElement("option");
op2.value = "blue";
op2.innerHTML = "蓝色";
sel.appendChild(op2)
//粉色
var op3 = document.createElement("option");
op3.value = "pink";
op3.innerHTML = "粉色";
sel.appendChild(op3)
}
function delNode() {
sel.parentNode.removeChild(sel);
}
function changeColor(obj) {
document.bgColor = obj.value;
}
</script>
</body>
说明: function changeColor(){
document.bgColor = this.value;
}
//此时的this表示window对象,而不是select中选择的下拉框