本文共 3290 字，大约阅读时间需要 10 分钟。
1.DOM
本文章基于《JavaWeb从入门到精通》视频教程进行整理，并由个人对部分内容进行补充说明。本文章仅用于个人学习/交流使用。
目录结构
1.简单学习
* HTML DOM 1. 标签体的设置和获取：innerHTML 2. 使用html元素对象的属性 3. 控制元素样式 1. 使用元素的style属性来设置 - div1.style.border = "1px solid red"; - div1.style.width = "200px"; - div1.style.fontSize = "20px"; 2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
功能：控制html文档的内容 * 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象 * 操作Element对象： 1. 修改属性值： - 明确获取的对象是哪一个？ - 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容： - 属性：innerHTML - 方法： 1. 获取元素对象 2. 使用innerHTML属性修改标签体内容 通过id获取元素对象
示例代码： <script> var a=document.getElementById("id"); </script>
加载顺序问题：如果将<script>写在<head>中，可能导致<body>内容无法被获取，建议将<script>写在<body>后面。
2.系统学习
概念：Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象。可以通过这些对象对标记语言文档进行CRUD操作。
W3C DOM 标准被分为 3 个不同的部分：核心DOM、XML DOM、HTML DOM
核心DOM：针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象，其他5个的父对象
XML DOM：针对 XML 文档的标准模型
HTML DOM：针对 HTML 文档的标准模型
2.核心DOM模型
1.Document对象
Document对象：文档对象 1. 创建：window.document 或 document 2. 方法： - 获取Element对象： - getElementById()：通过id获取元素对象 - getElementsByTagName()：通过元素名称获取元素对象数组 - getElementsByClassName()：通过Class属性值获取元素对象数组 - getElementsByName()：通过name属性值获取元素对象数组 - 创建其他DOM对象：createAttribute、createComment、createElement、createTextNode
Document对象示例： <div id="div1"></div> <div id="div2"></div> ... <input type="text" name="username"></input>
代码示例： var div1 = document.getElementById("div1"); var divs = document.getElementsByTagName("div"); var div_cls = document.getElementsByClassName("cls1"); var ele_username = document.getElementsByName("username"); var table = document.createElement("table");
2.Element对象
Element对象：元素对象 1. 方法： - removeAttribute()：删除属性 - setAttribute()：设置属性
示例代码： <a>点我试一试</a> <input type="button" id="btn_set" value="设置属性"></input> <input type="button" id="btn_remove" value="删除属性"></input>
代码示例： btn_set.onclick = function(){ var element_a = document.getElementsByTagName("a")[0]; element_a.setAttribute("href","https://www.baidu.com"); }; btn_remove.onclick = function(){ var element_a = document.getElementsByTagName("a")[0]; element_a.removeAttribute("href"); };
3.Node对象
Node对象：节点对象，所有DOM对象的父对象 特点：可以被视为树节点 方法： - CRUD操作： - appendChild()：添加子节点 - removeChild()：删除子节点 - replaceChild()：替换子节点 - 父亲属性：parentNode
Node对象示例： <meta charset="UTF-8"></meta> <title>Node对象</title> <style>...</style> <div id="div1">...</div>
代码示例： var element_a = document.getElementById("del"); element_a.onclick = function(){ var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); }; var element_add = document.getElementById("add"); element_add.onclick = function(){ var div1 = document.getElementById("div1"); var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); };
3.HTML_DOM
HTML DOM
功能： - 标签体的设置和获取：innerHTML - 使用html元素对象的属性 - 控制元素样式
样式控制方式： 1. 使用元素的style属性 - div1.style.border = "1px solid red"; - div1.style.width = "200px"; - div1.style.fontSize = "20px"; 2. 提前定义好类选择器的样式，通过className属性设置class属性
示例代码： <div id="div1"></div>
代码示例： var div = document.getElementById("div1"); div.innerHTML += "<input type='text'>"; // 通过className设置样式 div.className = "d1";
发表评论
最新留言
关于作者
