DOM
基本概念
DOM 全称是 Document Object Model 文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
document 对象
document 它是一种树结构的文档,有层级关系 在 dom 中把所有的标签都对象化
document 常用方法
getElementById
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var name = document.getElementById("name");
name.onclick = function(){
console.log(name.innerText); // 罗念笙
console.log(name.innerHTML); // <i>罗念笙</i>
}
}
</script>
</head>
<body>
<h1 id="name"><i>罗念笙</i></h1>
</body>
</html>
getElementsByName
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
// 注意：getElementsByName中传入的值需要带引号
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var sports = document.getElementsByName("sport");
btn1.onclick = function(){
for(i = 0;i < sports.length;i++){
sports[i].checked = !sports[i].checked;
}
}
btn2.onclick = function(){
for(i = 0;i < sports.length;i++){
sports[i].checked = true;
}
}
btn3.onclick = function(){
for(i = 0;i < sports.length;i++){
sports[i].checked = false;
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="sport" id="" value="soccer" />足球
<input type="checkbox" name="sport" id="" value="basketball" />篮球
<input type="checkbox" name="sport" id="" value="volleyball" />排球
<br/>
<button type="button" id="btn1">反选</button>
<button type="button" id="btn2">全选</button>
<button type="button" id="btn3">全不选</button>
</body>
</html>
createElement
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn01");
btn.onclick = function(){
// 添加图片标签
var img = document.createElement("img");
img.src = "./imgs/1.png";
img.width = 100;
document.body.appendChild(img);
}
}
</script>
</head>
<body>
<input type="button" id="btn01" value="按钮" />
</body>
</html>
HTML DOM节点
在 HTML DOM（文档对象模型）中，每个部分都是节点
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
实战练习
/* .css文件 */
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
韩顺平 Java 工程师
}
button {
width: 200px;
margin-bottom: 10px;
text-align: left;
}
#btnList {
float: left;
}
#total {
width: 450px;
float: left;
}
ul {
list-style-type: none;
margin: 0px;
韩顺平 Java 工程师 padding: 0px;
}
.inner li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
float: left;
}
.inner {
width: 400px;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示 HTML DOM 相关方法</title>
<link rel="stylesheet" type="text/css" href="./css/test.css" />
<script type="text/javascript">
window.onload = function(){
// 查找 id=java 节点
var btn1 = document.getElementById("btn01");
btn1.onclick = function(){
console.log("查找 id = java的节点");
var java = document.getElementById("java");
console.log(java.innerText);
}
// 查找所有 option 节点
var btn2 = document.getElementById("btn02");
btn2.onclick = function(){
console.log("查找所有 option 节点");
var optionAll = document.getElementsByTagName("option");
for(i = 0;i < optionAll.length;i++){
console.log(optionAll[i].innerText);
}
}
// 查找 name=sport 的节点
var btn3 = document.getElementById("btn03");
btn3.onclick = function(){
console.log("查找 name=sport 的节点");
var sports = document.getElementsByName("sport");
for(i = 0;i < sports.length;i++){
console.log(sports[i].value);
}
}
// 查找 id=language 下所有li节点
var btn4 = document.getElementById("btn04");
btn4.onclick = function(){
console.log("查找 id=language 下所有li节点");
var liAll = document.getElementById("language").getElementsByTagName("li");
for(i = 0;i < liAll.length;i++){
console.log(liAll[i].innerText);
}
}
// 返回 id=sel01 的所有子节点
var btn5 = document.getElementById("btn05");
btn5.onclick = function(){
console.log("返回 id=sel01 的所有子节点");
var sel01_Child = document.getElementById("sel01").childNodes;
for(i = 0;i < sel01_Child.length;i++){
console.log(sel01_Child[i].innerText); // 11 个子节点
}
}
// 返回 id=sel01 的第一个子节点
var btn6 = document.getElementById("btn06");
btn6.onclick = function(){
console.log("返回 id=sel01 的第一个子节点");
var sel01_First_Child = document.getElementById("sel01").childNodes;
console.log(sel01_First_Child.firstChild); // undefined
}
// 返回 id=java 的父节点
var btn7 = document.getElementById("btn07");
btn7.onclick = function(){
console.log("返回 id=java 的父节点");
var java_Parent = document.getElementById("java").parentElement;
console.log(java_Parent);
}
// 返回 id=ct 的前后兄弟节点
var btn8 = document.getElementById("btn08");
btn8.onclick = function(){
console.log("返回 id=ct 的前后兄弟节点");
// previousSibling属性，获取当前节点的上一个节点(前一个)
var ct_Brother = document.getElementById("ct").previousSibling;
console.log(ct_Brother.innerText); // undefined
// nextSibling属性，获取当前节点的下一个节点(后一个)
var ct_Brother = document.getElementById("ct").nextSibling;
console.log(ct_Brother.innerText); // undefined
}
// 读取 id=ct 的 value 属性值
var btn9 = document.getElementById("btn09");
btn9.onclick = function(){
console.log("读取 id=ct 的 value属性值");
var ct_Value = document.getElementById("ct");
console.log(ct_Value.value);
}
// 设置 #person 的文本域
var btn10 = document.getElementById("btn10");
btn10.onclick = function(){
console.log("设置 #person 的文本域");
var person = document.getElementById("person");
person.value = "大家好呀，我是小笙";
console.log(person.value);
}
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<P> 你会的运动项目： </P>
<input type="checkbox" name="sport" value="zq" checked="checked">足球
<input type="checkbox" name="sport" value="tq">台球
<input type="checkbox" name="sport" value="ppq">乒乓球
<br />
<hr />
<P> 你当前女友是谁： </P> <select id="sel01">
<option>---女友---</option>
<option>艳红</option>
<option id="ct" value="春桃菇凉">春桃</option>
<option>春花</option>
<option>桃红</option>
</select>
<hr />
<p> 你的编程语言? </p>
<ul id="language">
<li id="java">Java</li>
<li>PHP</li>
<li>C++</li>
<li>Python</li>
</ul> <br> <br>
<hr />
<p> 个人介绍: </p> <textarea name="person" id="person">个人介绍</textarea>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找 id=java 节点</button> </div>
<div><button id="btn02">查找所有 option 节点</button> </div>
<div><button id="btn03">查找 name=sport 的节点</button> </div>
<div><button id="btn04">查找 id=language 下所有 li 节点</button> </div>
<div><button id="btn05">返回 id=sel01 的所有子节点</button> </div>
<div><button id="btn06">返回 id=sel01 的第一个子节点</button> </div>
<div><button id="btn07">返回 id=java 的父节点</button></div>
<div><button id="btn08">返回 id=ct 的前后兄弟节点</button> </div>
<div><button id="btn09">读取 id=ct 的 value 属性值</button> </div>
<div><button id="btn10">设置#person 的文本域</button> </div>
</div>
</body>
</html>
XML DOM
概述
概念：可扩展标记语言
XML技术可以用于解决什么问题
- 解决程序间数据传输的问题 => json
- xml现在主要用来做配置文件(比如我们的tomcat服务器的server.xml，web.xml )
- xml可以充当小型的数据库 => 程序自己的数据格式存放
<?xml version="1.0" encoding="utf-8" ?>
<!--
xml dom
文档声明
xml 表示xml文件
version 表示版本
encoding 表示文件编码
-->
<!--
students 根目录
<student></student> 表示子元素
name，gender，sge 属性
-->
<students>
<student id="01">
<name>tom</name>
<gender>男</gender>
<sge>18</sge>
</student>
<student id="02">
<name>marry</name>
<gender>女</gender>
<sge>28</sge>
</student>
</students>
<!--
元素语法要求
每个XML文档必须有且只有一个根元素
根元素是一个完全包括文档中其他所有元素的元素
一个标签中也可以嵌套若干子标签。但所有标签必须合理的嵌套，绝对不允许交叉嵌套
-->
XML 元素命名规则
- 区分大小写
- 不能以数字开头
- 不能包含空格
- 名字中间不能包含冒号
- 如果标签需要间隔，建议使用下划线
CDATA 节
概念：有些内容不想让解析引擎执行，而是当作原始内容处理(即当做普通文本)，可 以使用 CDATA 包括起来，CDATA 节中的所有字符都会被当作简单文本，而不是 XML 标记
<?xml version="1.0" encoding="UTF-8" ?>
<students>
<student id="01">
<name>tom</name>
<gender>男</gender>
<sge>18</sge>
</student>
<code>
<!-- 如果希望把某些字符串,当做普通文本，使用 CDATA 包括 -->
<![CDATA[
<script data-compress=strip>
function h(obj){
obj.style.behavior='url(#default#homepage)';
var a = obj.setHomePage('//www.baidu.com/');
}
</script>
]]>
</code>
</students>
转义字符
DOM4j
概念：Dom4j 是一个简单、灵活的开放源代码的库(用于解析/处理 XML 文件)。Dom4j 是由早期 开发 JDOM 的人分离出来而后独立开发的
Dom4j 是一个非常优秀的 Java XML API，具有性能优异、功能强大和极易使用的特点。 现在很多软件采用的 Dom4j
测试代码
public class dom4j {
public static void main(String[] args) throws DocumentException {
// 创建一个解析器
SAXReader reader = new SAXReader();
Document document = reader.read(new File("src/student.xml")); // XML Document
System.out.println();
}
}
debug生成document树
使用 DOM4J 对 students.xml 文件进行增删改查
查找/获取
public class dom4j {
public static void main(String[] args) throws DocumentException {
// 创建一个解析器
SAXReader reader = new SAXReader();
Document document = reader.read(new File("src/student.xml")); // XML Document
// 得到rootElement
Element rootElement = document.getRootElement();
// 得到rootElement中students元素
List<Element> students = rootElement.elements("student");
for (Element student:students
) {
Element name = student.element("name");
Element gender = student.element("gender");
Element age = student.element("age");
// 获取属性id
String id = student.attributeValue("id");
System.out.println(id);
System.out.println(name.getText()+" "+gender.getText()+" "+age.getText()); // tom 男 18 \n marry 女 28
}
}
}
增加元素
public class Dom4jAddElement {
public static void main(String[] args) throws DocumentException, IOException {
// 得到解析器
SAXReader saxReader = new SAXReader();
Document document = saxReader.read(new File("src/student.xml"));
// 首先我们来创建一个学生节点对象
Element newStu = DocumentHelper.createElement("student");
Element newStu_name = DocumentHelper.createElement("name");
Element newStu_intro = DocumentHelper.createElement("resume");
Element newStu_age = DocumentHelper.createElement("age");
// 如何给元素添加属性
newStu.addAttribute("id", "03");
newStu_name.setText("jack");
newStu_age.setText("23");
newStu_intro.setText("计算机大佬");
// 把三个子元素（节点）加到 newStu 下
newStu.add(newStu_name);
newStu.add(newStu_age);
newStu.add(newStu_intro);
// 再把 newStu 节点加到根元素
document.getRootElement().add(newStu);
// 直接输出会出现中文乱码
OutputFormat output = OutputFormat.createPrettyPrint();
// 设置编码 utf-8
output.setEncoding("utf-8");
// 更新 xml 文件
// 使用到 io 编程 FileOutputStream 就是文件字节输出流
XMLWriter writer = new XMLWriter( new FileOutputStream(new File("src/student.xml")), output);
writer.write(document);
writer.close();
System.out.println("添加成功~");
}
}
删除元素
public class Dom4jDeleteElement {
public static void main(String[] args) throws DocumentException, IOException {
// 得到解析器
SAXReader saxReader = new SAXReader();
Document document = saxReader.read(new File("src/student.xml"));
// 找到该元素第三个学生
Element stu = (Element) document.getRootElement().elements("student").get(2);
// 删除元素
stu.getParent().remove(stu);
// 删除元素的某个属性
stu.remove(stu.attribute("id"));
// 直接输出会出现中文乱码
OutputFormat output = OutputFormat.createPrettyPrint();
// 设置编码 utf-8
output.setEncoding("utf-8");
// 更新 xml 文件
XMLWriter writer = new XMLWriter( new FileOutputStream(new File("src/student.xml")), output);
writer.write(document); writer.close();
System.out.println("删除成功~");
}
}
更新元素
public class Dom4jUpdateElement {
public static void main(String[] args) throws DocumentException, IOException {
// 得到解析器
SAXReader saxReader = new SAXReader();
Document document = saxReader.read(new File("src/student.xml"));
// 得到所有学生的年龄
List<Element> students = document.getRootElement().elements("student");
// 遍历, 所有的学生元素的 age + 3
for (Element student : students)
{
Element age = student.element("age");
age.setText((Integer.parseInt(age.getText()) + 3) + "");
}
// 直接输出会出现中文乱码
OutputFormat output = OutputFormat.createPrettyPrint();
// 设置编码 utf-8
output.setEncoding("utf-8");
// 更新 xml 文件
XMLWriter writer = new XMLWriter( new FileOutputStream(new File("src/student.xml")), output);
writer.write(document); writer.close();
System.out.println("更新成功~");
}
}
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
