BOM和DOM对象
BOM：浏览器窗口模型对象
-
创建
-
方法 ：
-
与弹出框有关的方法
alert（）显示带有一段消息和一个确认按钮的警告框
confirm（）显示带有一段消息以及确认按钮和 取消按钮的 对话框
- 如果用户 点击 取消 按钮，则方法返回false
prompt（）显示可提示用户输入的对话框
- 返回值，用户输入的值
-
与开发关闭有关的方法
- close （）关闭浏览器窗口（谁调用关闭谁）
- open（“窗口地址”）打开一个新的浏览器窗口
-
与定时器有关的方式
-
setTimeout（） 在制定的毫秒数后调用函数或者计算表达式
参数：1.js代码或者方法对象
返回值，唯一标识，用于取消定时器
-
clearTimeout（） 取消 由setTime out（）方法设置的timeout
-
setInterval（）按照指定周期（以毫秒计）来调用函数 或者计算表达式
-
clearInterval（） 取消 由setInterval（）方法设置的timeout
-
-
-
属性
-
获取其他BOM 对象
history
location
Navigator
Screen
-
获取DOM对象
-
-
特点
- window对象不需要创建就可以直接使用，window.方法名（）也可以
- window引用可以省略。方法名 （）
跳转网页的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ text-align: center; } #figure{ color: aqua; } </style> <script> var second = 5; function showTime() { second--; if (second<=0){ location.href = "https://www.baidu.com/"; } var figure = document.getElementById("figure"); figure.innerHTML = second+""; } setInterval(showTime,1000); </script> </head> <body> <p> <span id="figure">5</span>秒后跳转首页 </p> </body> </html> DOM的相关对象
简单介绍
-
获取页面标签（元素）对象：Element
document.getElementById(“id值”)：通过元素id来获取元素对象
-
操作Element对象
-
修改属性值
-
修改标签体内容
属性：innerHTML
- 获取元素对象
- 使用innerHTML属性修改标签体内容
-
概念：Document Object Model文档对象模型
将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行 CRUD（增删改查）操作
DOM标准被分为3个不同的部分
-
核心DOM-针对任何结构化文档的标准模型
-
Document：文档对象
-
Element：元素对象
-
Attribute：属性对象
-
Text：文本对象
-
Comment：注释对象
-
Node：节点对象，其他5个的父对象
-
特点 ：所有dom对象可以 被认为是一个节点
-
方法
-
CRUD dom树
- appendChild():向节点的子节点列表的结尾添加新的子节点
- removeChild（）：删除并返回当前节点的指定子节点
- replaceChild（）：用新节点替换一个子节点
-
属性
parentNode返回节点的父节点
-
-
动态表单案例 （这里的动态建立在面向对象的基础上，下面还有一种简单的方法，在HTML DOM中介绍）
<!DOCTYPE html>/ <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: aquamarine 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入id"> <input type="text" id="name" placeholder="请输入名字"> <input type="text" id="sex" placeholder="请输入性别"> <input type="button" value="添加" id="addbtn"> </div> <table> <caption>学生信息表 </caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td><a href="javascript:void(0)" οnclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>李四</td> <td>男</td> <td><a href="javascript:void(0)" οnclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>王五</td> <td>男</td> <td><a href="javascript:void(0)" οnclick="delTr(this);">删除</a></td> </tr> </table> <script> /** * 分析 * 添加 * 1.给添加按钮绑定单击事件 * 2.获取文本框内容 * 3.创建td设置td的文本为文本框的内容 * 4.创建tr * 5.将td添加到tr中 * 6.获取table，将tr添加到table中 * * 删除 * 1.确定点击的是哪一个超链接 * <a href="javascript:void(0);" οnclick="delTr(this)">删除</a> */ //获取按钮 document.getElementById("addbtn").onclick = function () { //2.获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var sex = document.getElementById("sex").value; //3.创建id var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); var td_sex = document.createElement("td"); var text_sex = document.createTextNode(sex); td_sex.appendChild(text_sex);; var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);") ele_a.setAttribute("onclick","delTr(this)"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //4.创建tr var tr = document.createElement("tr"); //5.添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_sex); tr.appendChild(td_a); //6.获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>创建DOM对象
createDocument（）
createElement（）
createAttribute（name）
createTextNode（）
-
-
XML DOM-针对XML文档的标准模型
-
HTML DOM - 针对HTML文档的标准模型
-
标签提的设置和获取：innerHTML
-
使用 html元素对象的属性
动态表单案例，非面向对象
//获取按钮 document.getElementById("addbtn").onclick = function () { //2.获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var sex = document.getElementById("sex").value; var table = document.getElementsByTagName("table")[0]; table.innerHTML += "<tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+sex+"</td>\n" + " <td><a href=\"javascript:void(0)\" οnclick=\"delTr(this);\">删除</a></td>\n" + " </tr>"; } function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } -
控制样式
- 使用元素的 style属性
- 提前定义好类选择器的样式，通过元素的className 属性来设置class属性值
-
文章来源: https://blog.csdn.net/weixin_43529311/article/details/97299499