首页 > 代码库 > Python开发【前端】：DOM
Python开发【前端】：DOM
DOM（文档对象模型(Document Object Model)）
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作
1、查找元素
① 直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
② 间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
2、操作
① 内容
innerText 文本 outerText innerHTML HTML内容 innerHTML value 值
② 属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="http://www.mamicode.com/democlass";
document.getElementById(‘n1‘).setAttributeNode(atr);
*/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="http://www.mamicode.com/全选" onclick="CheckAll();"/>
<input type="button" value="http://www.mamicode.com/取消" onclick="CancelAll();"/>
<input type="button" value="http://www.mamicode.com/反选" onclick="ReverseCheck();"/>
<table border="1" >
<thead>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
</tr>
</tbody>
</table>
<script>
function CheckAll(ths){
var tb = document.getElementById(‘tb‘);
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
inp.checked = true;
}
}
}
function CancelAll(ths){
var tb = document.getElementById(‘tb‘);
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
inp.checked = false;
}
}
}
function ReverseCheck(ths){
var tb = document.getElementById(‘tb‘);
var trs = tb.childNodes;
for(var i =0; i<trs.length; i++){
var current_tr = trs[i];
if(current_tr.nodeType==1){
var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
if(inp.checked){
inp.checked = false;
}else{
inp.checked = true;
}
}
}
}
</script>
</body>
</html>
Demo
3、扩展练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id = "i1">我是i1</div> <a>aaaaa</a> <a>bbbbb</a> <a>ccccc</a> </body> </html>
//获取ID
>document.getElementById(‘i1‘);
< <div id=?"i1">?我是i1?</div>?
//获取内容
>document.getElementById(‘i1‘).innerText
<"我是i1"
//重新赋值
>document.getElementById(‘i1‘).innerText = ‘新内容‘
<"新内容"
//获取tagname集合
>document.getElementsByTagName(‘a‘);
<[<a>?aaaaa?</a>?, <a>?bbbbb?</a>?, <a>?ccccc?</a>?]
//获取集合指定索引元素
>document.getElementsByTagName(‘a‘)[1]
< <a>?bbbbb?</a>?
//对单个元素重新赋值
>document.getElementsByTagName(‘a‘)[1].innerText = 66666;
<66666
//对集合中所有文件赋值
>tags = document.getElementsByTagName(‘a‘);
<[<a>?aaaaa?</a>?, <a>?66666?</a>?, <a>?ccccc?</a>?]
>for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}
<99999
>tags
<[<a>?99999?</a>?, <a>?99999?</a>?, <a>?99999?</a>?]
Python开发【前端】：DOM
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。