前端JS学习笔记

Js
BOM ( Browser Object Model)
BOM就是浏览器的对象模型。

浏览器可以通过调用系统对话框，向用户显示信息。
系统提供了三个函数,可以完成系统对话框的操作。
1.alert()
2.confirm()
【功能】弹出一个带有确定和取消按钮的警告框。
【返回值】如果点击确定，返回true
如果点击取消，返回false

prompt()
【功能】弹出一个带输入框的提示框。
【参数】第一个参数:要在提示框上显示的内容。
第二个参数:输入框内默认的值。
【返回值】点击确定:返回值是输入的内容
点击取消:返回值是null

opener
打开当前窗口的父窗口的window对象

location. hash锚点 #1 实现页内跳转

url统―资源定位符
protocol(协议):host(主机名):port(端口号)/pathname(路径)?查询字符串(search)#锚点(hash)
http://www. baidu. com:8080/ code/xXx.html?username=xxx&age=18#1

获取当前的样式：
ep：oDiv=document.getElementById(“idname”);
alert(getComputedStyle(oDiv)[“width”]);

//获取当前样式的兼容函数
function getStyle(elem, attr){
return elem.currentStyle ? elem.currentStyle[attr] :
getComputedStyle(elem) [attr];
}
alert(getStyle(oDiv,“width”));

属性的获取：
id document.getElementById()
tagName node. getElementsByTagName()
namedocument.getElementsByName()
className document.getElementsByClassName()

dom_attribute方法
var oDiv=document.getElementById(‘idname’);
oDiv.setAttribute(“xxx”,“yyy”);设置属性
oDiv.getAttribute(“xxx”); 获取属性值
oDiv.removeAttribute(“xxx”);删除该属性

childNodes 获取当前元素节点的所有的子节点，包括两种节点类型
1、元素节点
2、文本节点
DOM节点（节点属性)
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为:nodeName、nodeType和nodeValue。
document.getElementByld(‘box’).nodeType; //1，元素节点

firstChild
快速找到当前元素节点子节点的第一个
lastChild
快速找到元素节点子节点的最后一个
parentNode
属性返回该节点的父节点,

属性节点
attribute属性返回该节点的属性节点【集合】。集合特点:1、不重复2、无序
属性
attributes.length返回属性节点个数

//访问其中一个属性节点
alert (oDiv.attributes.getNamedItelm ( “id”));//object
Attr
alert(oDiv.attributes [" id"]);

【注】document.write()
添加内容的时候，会将原有的页面上的内容覆盖掉。

createElement()
【格式】document.createElement(标签名);
appendChild()
【格式】parent.appendChild(newNode)
功能:将newNode插入到parent子节点的末尾。

createTextNode()
【格式】document.createTextNode(文本)
功能:创建文本节点。

insertBefore()
【格式】父节点.insertBefore(插入的节点,旧节点);功能:将插入的节点插入到旧节点之前。
获取tagName
var oSpan = document.getElementsByTagName( “span”)[0];//因为返回的是数组，所以必须加下标
DOM里**insertAfter()**这个方法没有，需要自己进行封装

replaceChild()
【格式】parent.replaceChild(newNode,oldNode);功能:用newNode将oldNode给替换掉。
cloneNode()
【格式】node. cloneNode()
功能:克隆节点
返回值:新克隆出来的节点
参数:true默认是false如果传true，就会复制元素节点中的innerHTML
node. cloneNode(true)同时克隆文本内容

removeChild()
【格式】node. parentNode.removeChild(node);功能:删除节点

id=“test”
var oDiv=document.getElementById( “test”);
oDiv.onclick = function()
console.log( “click”);
}
oDiv.onmouseover = function(){
alert(this.innerText);
}
oDiv.οnmοusedοwn= function(){
console.log(“mousedown”);}
oDiv.onmouseup = function(){
console.log(“mouseup”);
【注】click事件会发生在mousedown和mouseup事件之后