JS笔记(四): BOM和DOM对象

/*
BOM对象: 浏览器窗口对象模型
1. windows对象(即全局对象): 一个html文档对应一个window对象
1> 创建: 直接使用
2> 方法: alert() // 警示框
var res = confirm('info') // 确认框
var res = prompt('info','default-value') // 输入框

open("URL") // 打开一个新窗口 close() // 关闭当前窗口
setInterval(f,time) // 循环执行f,会创建一个cloak对象 clearInterval(clock) //清除循环
setTimeout(f, time) // 定时调用,会创建一个cloak对象 cleaTimeout(clock) // 清除定时
2. history:
1> 方法:
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>

3. location:
1> 方法:
location.assign(url) // 指向新url, 可返回
location.reload() // 刷新
location.replace(url) // 用新url代替当前网页, 不可返回

*/

/*
DOM 对象: HMTL /XML 文本对象
1. 分为 document , element 节点对象
2. 每个node节点有 自身属性, 导航属性
* 自身属性: nodeName // 节点名
attr // 节点值属性值
innerHTML // 节点内容,包含内部html
innerText // 节点文本, 不包含html
// nodeType // 节点类型
// attributes // 节点属性

* 导航属性: parentElement // 父节点
children //所有子节点, 返回集合
firstElementChild // 第一个子节点
lastElementChild // 最后一个子节点
nextElementSibling // 下一个兄弟节点
previousElementSibling // 上一个兄弟节点
3. 查找方法:
getElementById("id"); //唯一, element不支持
getElementsByTagName("p"); // 标签集合
getElementsByClassName(""); // class集合
getElementsByName(""); // 自定义类集合, element不支持

4. 事件events:
1.> 添加事件的两种方式:
<input type="text" onclick="begin()"> // 直接写在html文件
ele.onclick = function(){}; // js文件中添加 , √

2.> 事件类型:
onclick // 单击
ondblclick // 双击

onfocus //元素获得焦点
onblur // 元素失去焦点,表单验证
onsubmit // 确认按钮被点击。 只能给form元素使用.在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交

onkeydown // 键盘按下一个键
onload // 页面加载完成时执行 onload 属性开发中 只给 body元素加

onmousemove // 鼠标被移动。
onmouseout // 鼠标从某元素移开。
onmouseover // 鼠标移到某元素之上。
onmouseleave // 鼠标从元素离开

event // 记录事件的信息 event.preventDefault(); // 阻止该事件
event.stopPropagation(); // 阻止该事件向外传播


5.修改DOM:
1).Element增删改查:
1>. 增加: ele = document.createElement("p");
ele.innerHTML = 'text';
father.appendChild(ele); // 尾插
father.insertBefore(new_ele,old_ele); // old_ele之前插入
2>. 删除: father.removeChild(ele);
3>. : father.replaceChild(new_ele,old_ele);
2). 属性修改:
ele.attr = new_value;
ele.classlist; // 返回class属性值,数组
ele.classlist.add;
ele.classlist.remove;
*/
posted @ 2019-05-10 15:18  lancelotxly  阅读(197)  评论(0编辑  收藏  举报