核心DOM模型:
* Document:文档对象1. 创建(获取):在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法:1. 获取Element对象:1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象:createAttribute(name)createComment()createElement()createTextNode()3. 属性* Element:元素对象1. 获取/创建:通过document来获取和创建2. 方法:1. removeAttribute():删除属性2. setAttribute():设置属性* Node:节点对象,其他5个的父对象* 特点:所有dom对象都可以被认为是一个节点* 方法:* CRUD dom树:* appendChild():向节点的子节点列表的结尾添加新的子节点。* removeChild() :删除(并返回)当前节点的指定子节点。* replaceChild():用新节点替换一个子节点。* 属性:* parentNode 返回节点的父节点。
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document对象</title></head>
<body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div class="cls1">div4</div><div class="cls1">div5</div><input type="text" name="username"><script>/*Document:文档对象1. 创建(获取):在html dom模型中可以使用window对象来获取1. window.document2. document2. 方法:1. 获取Element对象:1. getElementById() : 根据id属性值获取元素对象。id属性值一般唯一2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组2. 创建其他DOM对象:createAttribute(name)createComment()createElement()createTextNode()3. 属性*///2.根据元素名称获取元素对象们。返回值是一个数组var divs = document.getElementsByTagName("div");//alert(divs.length);//3.根据Class属性值获取元素对象们。返回值是一个数组var div_cls = document.getElementsByClassName("cls1");// alert(div_cls.length);//4.根据name属性值获取元素对象们。返回值是一个数组var ele_username = document.getElementsByName("username");//alert(ele_username.length);var table = document.createElement("table");alert(table);</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Element对象</title>
</head>
<body><a>点我试一试</a><input type="button" id="btn_set" value="设置属性"><input type="button" id="btn_remove" value="删除属性"><script>//获取btnvar btn_set =document.getElementById("btn_set");btn_set.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.setAttribute("href","https://www.baidu.com");}//获取btnvar btn_remove =document.getElementById("btn_remove");btn_remove.onclick = function(){//1.获取a标签var element_a = document.getElementsByTagName("a")[0];element_a.removeAttribute("href");}</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Node对象</title><style>div{border: 1px solid red;}#div1{width: 200px;height: 200px;}#div2{width: 100px;height: 100px;}#div3{width: 100px;height: 100px;}</style></head>
<body><div id="div1"><div id="div2">div2</div>div1</div><a href="javascript:void(0);" id="del">删除子节点</a><a href="javascript:void(0);" id="add">添加子节点</a><!--<input type="button" id="del" value="删除子节点">-->
<script>//1.获取超链接var element_a = document.getElementById("del");//2.绑定单击事件element_a.onclick = function(){var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");div1.removeChild(div2);}//1.获取超链接var element_add = document.getElementById("add");//2.绑定单击事件element_add.onclick = function(){var div1 = document.getElementById("div1");//给div1添加子节点//创建div节点var div3 = document.createElement("div");div3.setAttribute("id","div3");div1.appendChild(div3);}/*超链接功能:1.可以被点击:样式2.点击后跳转到href指定的url需求:保留1功能,去掉2功能实现:href="javascript:void(0);"*/var div2 = document.getElementById("div2");var div1 = div2.parentNode;alert(div1);</script>
</body>
</html>