DOM----学习笔记
程序员文章站
2022-05-28 21:05:41
...
DOM 文档对象模型
Document Object Model
文档：标记型文档（HTML/XML）
对象：封装了属性和行为（方法）
模型：共性特征的体现
DOM解析HTML
通过DOM的方法，把HTML全部（元素（标签），文本，属性）都封装成了对象
<span id = "spanId">文本</span>
DOM想要操作标记型文档先解析（解析器）
DOM解析HTML（浏览器就可以解析）
浏览器DOM解析HTML？
把HTML文档解析成树状结构
树
树只有一个根节点
叶子节点没有子节点
没有父节点的节点是根节点
每个节点只有一个父节点，但是可以有多个子节点
树的高度：层级
解析后提供的对象
-
Document:代表整个文档
-
Element：元素（标签）对象
-
Attribute:属性的对象
-
Text:文本对象
-
Node:节点对象(上面4个都属于Node)
DOM三个级别和DHTML介绍
DOM
一级DOM 只有HTML
二级DOM 在一级基础上添加功能，css的支持
三级DOM xml1.0的支持
DHTML不是一种编程语言
动态HTML语言
html:封装数据
css：设置样式（显示效果）
dom:提供对象，操作HTML，解析HTML
js：提供逻辑
Document:代表整个文档（树形结构）
方法：
docoument.getElementById("id的值") //通过元素的id的属性获取元素(标签)的对象
docoument.getElementsByName("name属性值") //通过名称获取元素对象的集合（返回数组）
getElementsByTagName("标签名称") //通过标签名称获取元素对象的集合（返回数组）
write("文本的内容(html的标签)") //把文本内容写道浏览器上
createElement("元素名称"); //创建元素对象
createTextNodeA("文本内容"); //创建文本对象
appendChile("对象”) //添加子节点
一个添加元素的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
<script type="text/javascript">
/*
在ul无序列表下，添加一个子节点<li>深圳</li>
创建元素对象<li></li>
创建文本对象 深圳
把深圳添加到li的下面。作为li的子节点
把li添加到ul下面，作为ul的子节点
* */
function add(){
var li = document.createElement("li");
var sz = document.createTextNode("深圳");
li.appendChild(sz);
var ul = document.getElementsByTagName("ul")[0];
ul.appendChild(li);
}
add();
</script>
</html>
Element对象
获取元素对象
getAttribute("属性名称"); //获取属性的值
setAttribute("属性的名称","属性的值"); //设置或者修改属性的值
removeAttribute("属性名称"); //删除属性
获取元素下的所有子节点
childNodes() //包含空格和回车
Element.getElementsByTagName()
例子：
<ul id="ulId">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<script type="text/javascript">
//修改
// input.setAttribute("value","lisi");
// alert(input.getAttribute("value"));
// input.removeAttribute("value");
// alert(input.getAttribute("value"));
//===========================
var ul = document.getElementById("ulId");
var lis = ul.childNodes;
//alert(lis.length); //7，包含了空格和回车
var lis2 = ul.getElementsByTagName("li");
alert(lis2.length);
</script>
Node:节点对象
-
nodeName:节点名称
-
nodeType:节点类型
-
nodeValue:节点的值
元素 属性 文本 nodeName 大写的标签名称 属性名 #text nodeType 1 2 3 nodeValue null 属性的值 文本的内容 parentNode 获取父节点，始终返回的是一个元素节点 childNodes 所有子节点，包含空格和回车 firstChild 第一个子节点 firstElementClid 第一个元素子节点,可以解决空格之类的问题 lastChild 最后一个子节点 nextSibling 下一个兄弟节点 previousSibling 上一个兄弟节点 <input type="text" id="nameId" value="zhangsan"/> <span id="spanId"> 我是span的区域 </span> <script type="text/javascript"> var input = document.getElementById("nameId"); // alert(input.nodeName); //INPUT // alert(input.nodeType); //1 // alert(input.nodeValue); //null var attr = input.getAttributeNode("type"); // alert(attr.nodeName); //type // alert(attr.nodeType); //2 // alert(attr.nodeValue); //text var span = document.getElementById("spanId"); var text = span.firstChild; alert(text.nodeName); //#text alert(text.nodeType); //3 alert(text.nodeValue); //我是span的区域
一些特殊的使用场景
<ul>
<li>北京</li>
</ul>
若果通过ul获取北京的子节点，使用的是 ul.firstElememtChild; 获取北京的子节点(IE9-11,Chrome,FireFox)
但是如果是IE6-8，需要使用firstChild
<span id="spanID">
文本内容
</span>
使用span的标签获取span中间的文本类容(也是对象),需要使用firstChild(不管什么浏览器)
方法
hasChildNodes() 检查是否包含子节点
hasAttributes() 检查是否包含属性
操作DOM节点树
appendChild(node) 父节点调用，在末尾添加子节点
insertBefore(new,old) 父节点调用，在指定节点之间添加子节点
replaceChild(new,old) 父节点调用， 替换节点
removeChild(node) 父节点调用，删除节点
cloneNode(boolean) 复制节点,不是父节点调用
boolean: 如果是true，复制子节点
如果是flase，不复制子节点，比如一个有字的按钮，这样复制就没有字了
innerHTML
innerHTML的属性
获取文本内容
设置文本内容
<span id="spanId">
这是span的区域
</span>
<span id="spanId2"></span>
<script type ="text/javascript">
var span = document.getElementById("spanId");
// alert(span.innerHTML)
var span2 = document.getElementById("spanId2");
span2.innerHTML = "这是span的区域2";
alert(span2.innerHTML);
</script>
事件
onClick 点击事件
onload 加载事件
onfocus 获取焦点事件
onblur 失去焦点事件
鼠标移动事件
onmousemove //移动
onmouseout //移除
onmouseover //悬停
鼠标点击事件
onclick
ondbclick //双击
加载和卸载
onload
onunload //卸载
获取焦点和数去焦点
onfocus
onblur
键盘事件
onkeyup //按下抬起
改变事件
onchange
控制表单的提交
onsubmit
<span id="spanId">
这是span的区域
</span>
<span id="spanId2"></span>
<h3>获取焦点的事件</h3>
输入姓名：<input type="text" name="username" onfocus="run()" onblur="run2()"/><span id="uspan"></span>
<script type="text/javascript">
var span = document.getElementById("spanId");
// alert(span.innerHTML)
var span2 = document.getElementById("spanId2");
span2.innerHTML = "这是span的区域2";
alert(span2.innerHTML);
function run(){
var uspan = document.getElementById("uspan");
uspan.innerHTML = "您只能输入特殊的字符";
}
function run2(){
var uspan = document.getElementById("uspan");
uspan.innerHTML = "";
}
</script>
全选/全部选/反选的练习
思路：
全选：获取名称是love的所有input标签
循环遍历。为了拿到每一个input标签，这只checked
<input type="checkbox" id="boxId" onclick="selOrNo()" />全选/全部选<br />
<input type="checkbox" name="love" />篮球<br />
<input type="checkbox" name="love" />足球<br />
<input type="checkbox" name="love" />排球<br />
<input type="checkbox" name="love" />棒球<br />
<input type="checkbox" name="love" />冰球<br />
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全不选" onclick="selNo()" />
<input type="button" value="反选" onclick="selOth()" />
<script type="text/javascript">
function selAll(){
//获取名称是love的所有input标签，返回数组
var inputs = document.getElementsByName("love");
for (var i=0 ;i<inputs.length; i++) {
var input = inputs[i];
//设置checked
input.checked = true;
//input.setAttribute("checked","false");
}
}
function selNo(){
var inputs = document.getElementsByName("love");
for (var i = 0 ;i<inputs.length;i++) {
var input = inputs[i];
input.checked = false;
}
}
//反选
function selOth(){
var inputs = document.getElementsByName("love");
for (var i = 0 ;i<inputs.length;i++) {
var input = inputs[i];
//判断
if(true == input.checked){
input.checked = false;
}else{
input.checked = true;
}
}
}
//全选全部选
function selOrNo(){
var box = document.getElementById("boxId");
//判断
if(box.checked == true){
//调用全选方法
selAll();
}
else{
selNo();
}
}
</script>
上一篇： 冬瓜怎么吃有减肥的效果