# DOM简单学习
功能:控制html文档的内容 获取页面标签(元素)对象:Element documnet.getElementById("id值"):通过元素的id获取元素对象 操作Element对象: 1. 修改属性值: 1. 明确获取的对象 2. 看API文档 2. 修改标签体内容: 属性:innerHTML 1. 数去元素对象 2. 使用innerHTML属性修改标签体内容 <h1 id="title">学习</h1> //1.获取h1标签对象 var title = document.getElementById("title"); //2.修改内容 alert("换内容"); title.innerHTML = "打游戏";
事件简单学习
如何绑定事件 1. 直接在html标签上,指定事件的属性(操作),属性就是js代码 事件:onclick--- 单击事件 2. 通过js获取元素对象,指定事件属性,设置一个函数 //1.获取light2对象 var light2 = document.getElementById("light2"); //2.绑定事件 light2.onclick = fun2;
BOM
1. 概念: Browser object Model 浏览器对象模型 将浏览器的各个组成部分封装成对象 2. 组成: Window: 窗口对象 Navigator: 浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象 3. Window:窗口对象 1. 创建 2. 方法 1. 与淡出框有关的方法: alert() 一显示带有一段消息和一个确认按钮的警告框。 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。 如果用户点击确定按钮,则方法返回true 如果用户点击取消按钮,则方法返回false prompt() 显示可提示用户输入的对话框。 返回值:获取用户输入的值 2. 与打开关闭有关的方法: close() 关闭浏览器窗口。 谁调用就关谁 open() 打开有关新的浏览器窗口 返回新的window对象 <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> var newWindow; //打开新窗口 var openBtn = document.getElementById("openBtn"); openBtn.onclick = function(){ newWindow=open("https://www.baidu.com"); } //关闭新窗口 var closeBtn = document.getElementById("closeBtn"); closeBtn.onclick = function(){ newWindow.close("https://www.baidu.com"); } 3. 与定时器有关的方法 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 参数: 1. js代码或者方法对象 2. 毫秒值 返回值:唯一标识,用于取消定时器 clearTimeout() 取消 //一次性定时器 setTimeout(fun,2000); var id = setTimeout(fun,2000); clearTimeout(id); function fun(){ alert("boom"); } setIntterval() 设置循环 clearInterval() 取消 3. 属性: 1. 获取其他BOM对象: history location Navigator Screen 2. 获取DOM对象 document 4. 特点 window对象不需要创建可以直接使用 window.方法名() window引用可以省略 方法名() 4. Location:地址栏对象 1. 创建: 1. window.location 2. location 2. 方法: reload() 刷新 3. 属性 href 设置或返回完整的URL var href = location.href; var gotoBaidu = document.getElementById("gotoBaidu"); //2. 绑定单击事件 gotoBaidu.onclick = function(){ //3.刷新 location.href = "https://www.baidu.com"; } 5. History:历史记录对象 1. 创建: 1. window.history 2. history 2. 方法: back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL go(参数) 向前或者向后加载 正数:前进 3. 属性: length 返回当前窗口历史列表中的URL数量。
DOM
概念: Document Object Model 文档对象模型 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作 w3c DOM 标准被分为3给不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 Document:文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 Node:节点对象,其他5个的父对象 XML DOM - 针对XML文档的标准模型 HTML DOM - 针对HTML文档的标准模型 核心DOM模型: Document:文档对象 1. 创建:在html dom模型中可以使用window对象来获取 1. window.document 2. document 2. 方法: 1. 获取Element对象: 1. getElementById():根据id属性值获取元素对象。id属性值一般唯一 2. getElementssByTagName():根据元素名称获取元素对象们。返回值是一个数组 3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 4. getElementsByName():根据name属性值获取元素对象们。返回值是一个数组 <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div class="cls1">div4</div> <div class="cls1">div5</div> <input type="text" name="username"> //2.根据元素名称获取元素对象们。返回值是一个数组 var divs = document.getElementsByTagName("div"); //3.根据Class属性值获取元素对象们。返回值是一个数组 var div_cls = document.getElementsByClassName("cls1"); //4.根据Name属性值获取元素对象们。返回值是一个数组 var ele_username = document.getElementsByName("username"); 2. 创建其他DOM对象: createAttribute(name) createComment() createElement() createTextNode() 3. 属性 Element:元素对象 1. 获取/创建:通过document来获取和创建 2.方法: 1. removeAttribute():删除属性 2. setAttribute():设置属性 var btn_set = document.getElementById("btn"); btn_set.onclick = function (){ var element_a = document.getElementsByTagName("a")[0]; element_a.setAttribute("href","https://www.baidu.com"); } var btn_remove= document.getElementById("btn2"); btn_remove.onclick = function (){ var element_a = document.getElementsByTagName("a")[0]; element_a.removeAttribute("href"); } Node:节点对象 特点:所有dom对象都可以被认为是一个节点 方法: CURD dom树: appendChild():向节点的子节点列表的结尾添加新的子节点。 removeChild():删除(并返回)当前节点的指定子节点。 removeChild():用新节点替换一个子节点 <div id="div1"> <div id="div2">div2</div> div1 </div> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> 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); } 属性: parentNode 返回节点的父节点 var div2 =document.getElementById("div2"); var div1 = div2.parentNode; 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属性值 .d2{ border: 1px solid blue; width: 100px; length: 10px; } div2.className = "d2";
事件监听机制
常见的事件: 1. 点击事件: 1. onclick:单击事件 2. ondblclick:双击事件 2. 焦点事件: 1. onblur:失去焦点 2. onfocus:元素获得焦点 3. 加载事件: 1. onload: 4. 鼠标事件: 1. onmousedown 鼠标按钮被按下 2. onmouseup 鼠标按键被松开 3. onmousemove 鼠标被移动 4. onmouseover 鼠标移到某元素之上。 5. onmouseout 鼠标从某元素移开。 5. 键盘事件: 1. onkeydown 某个键盘按键被按下。 2. onkeyup 某个键盘按键被松开。 3. onkeypress 某个键盘按键被按下并松开。 6. 选择和改变 1. onchange 域的内容被改变。 2. onselect 文本被选中。 7. 表单事件: 1. onsubmit 确认按钮被点击。 2. onreset 重置按钮被点击。