1. window的子对象
1.1 location对象
location.href //获取URL
location.href="URL" // 跳转到指定页面location.href="http://www.baidu.com"
location.reload() //重新加载页面,刷新
1.2 弹出框
警告框 alert("你看到了吗?");
1.3 计时相关
1.3.1 setTimeout 和 clearTimeout
// 在指定时间(3000毫秒)之后执行一次相应函数
var timer = setTimeout(function(){console.log('hehe')}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
function foo(){console.log('hehe')};
var timer = setTimeout(foo,3000); //这里不能写foo(),否则没等到3秒就马上开始执行函数。
1.3.2 setInterval 和 clearInterval
// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log('hehe')}, 3000)
// 取消setInterval设置
clearInterval(timer);
2. DOM
BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。
DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素。
DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时,浏览器会创建页面的文档对象模型DOM(Document Object Model)。
DOM标准规定HTML文档中的每个成分都是一个节点(node):
文档节点(document对象):代表整个文档
元素节点(element 对象):代表一个元素(标签)
文本节点(text对象):代表元素(标签)中的文本
属性节点(attribute对象):代表一个属性,元素(标签)才有属性
注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML:
JavaScript 能够改变页面中的所有 HTML 元素和属性、 CSS 样式,和对页面中的所有事件做出反应。
3. JS对HTML元素的增删改查
3.1.1 查找标签
document.getElementById('d1'); //根据ID获取一个标签,d1是ID名
document.getElementsByClassName('c1'); //根据class名获取一个标签
document.getElementsByTagName('div'); //根据标签名获取标签合集
var d1Ele = document.getElementById('d1'); //根据ID获取一个标签放在变量d1Ele里面
d1Ele; //<input >
3.1.2 间接查找:测试过只有id才可以使用下面的方法,class是不可以的,未找到原因。
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
示例:
<div >
<div >我是i1里面的i2</div>
</div>
var i2Ele = document.getElementById('i2');
i2Ele.parentElement;
3.2 增:增加节点(node)
创建标签:createElement
追加标签:appendChild
插入标签:insertBefore
3.1.1 创建标签createElement,追加标签appendChild
var id1Ele = document.getElementById('id1');
var imgEle = document.createElement('img'); //创建节点,创建img标签
id1Ele.appendChild(imgEle); //追加一个子节点(作为最后的子节点),id为id1的标签嵌套img标签
imgEle.src = 'https://timgsa.baidu.com/timg?'; //添加图片地址
3.1.2 在id3前面插入a标签。插入标签insertBefore、添加内容innerText
<div >
dfaf
<div >aaa</div>
</div>
var id2Ele = document.getElementById('id2'); //找到id2标签
var id3Ele = document.getElementById('id3'); //找到id3标签
var aEle = document.createElement('a'); //创建a标签
id2Ele.insertBefore(aEle,id3Ele); //在id3前面插入a标签
aEle.innerText = '点我跳到sogo'; //a标签添加内容
aEle.href = 'http://www.sogo.com'; //a标签添加要跳转的网址
3.3 删:删除节点,父元素删除子元素。removeChild
<div >
i1
<div >i2</div>
</div>
var i1Ele = document.getElementById('i1'); //找到标签i1
var i2Ele = document.getElementById('i2'); //找到标签i2
i1Ele.removeChild(i2Ele); //i1删除i2
3.4 改:
3.4.1 替换节点:父元素把子元素替换成新元素
语法:
somenode.replaceChild(newnode, 某个节点);
<div >
i1
<div >i2</div>
</div>
var i1Ele = document.getElementById('i1'); //找到标签i1
var i2Ele = document.getElementById('i2'); //找到标签i2
var aEle = document.createElement('a'); //创建a标签
i1Ele.replaceChild(aEle,i2Ele); //替换
3.4.2 修改节点的值 innerText 和 innerHTML
示例1:innerText
<div >
i1
<div >i2</div>
</div>
var i1Ele = document.getElementById('i1'); //找到i1标签
i1Ele.innerText; //获取i1标签的值,是text文本
i1Ele.innerText = 'i1i1'; //修改值,结果是<div >i1i1</div>
示例2:innerHTML可以快速增加和修改标签。
<div >
i1
<div >i2</div>
</div>
var i1Ele = document.getElementById('i1'); //找到i1标签
i1Ele.innerHTML; //获取i1标签的值,是标签"<a href="">我是a标签</a>"
i1Ele.innerHTML = '<a href="">我是a标签</a>'; //修改值
3.5 Attribute属性操作:
3.5.1 自定义属性或自带属性:
自定义属性:age为自定义属性
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
自带属性:
imgEle.setAttribute("src","http://........")
3.5.2 自带属性:自带属性还可以直接通过 .属性名 来获取和设置
imgEle.src
imgEle.src="..."
3.6 获取值操作:适用于input select textarea
语法:
elementNode.value
<input type="text" >
<script>
var d1Ele = document.getElementById("d1"); //找到d1标签
d1Ele; //<input type="text" >
d1Ele.value; //"迈腾2020"
d1Ele.value = ''; //把value默认值修改为空字符串,也就是清空内容,去掉默认值。
d1Ele.value; //""
</script>
3.7 class的操作(不是重要的内容)
className 获取类名
classList.remove(cls) 删除指定类名
classList.add(cls) 添加类名
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加
示例:
<div class="c1 c2 c3">div</div>
var divEles = document.getElementsByTagName('div');
divEles; //HTMLCollection [ div.c1.c2.c3 ],数组
divEles[0]; //<div class="c1 c2 c3"> 数组使用索引来取值,得到标签才可以进行class的操作
divEles[0].className; //"c1 c2 c3" 获取类名
divEles[0].classList; //DOMTokenList(3) [ "c1", "c2", "c3" ]
divEles[0].classList.remove('c3'); //删除指定类名
divEles[0].className; //"c1 c2"
divEles[0].classList.add('cc'); //添加类名
divEles[0].className; //"c1 c2 cc"
divEles[0].classList.contains('cc'); //true 存在类名cc所以返回true,否则返回false
3.7.2 指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律:
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如:
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性,将中横线后面的第一个字母换成大写即可。如:
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
4. document.getElementById('d1')、document.getElementsByClassName('c1')、document.getElementsByTagName('p')的区别:
<div >d1d1</div>
<div class="c1">c1c1</div>
<p>pp</p>
<script>
var d1Ele = document.getElementById('d1');
d1Ele; //<div > 返回标签
var c1Ele = document.getElementsByClassName('c1');
c1Ele; //HTMLCollection [ div.c1 ] 返回数组
c1Ele[0]; //<div class="c1"> 返回标签
var pEle = document.getElementsByTagName('p');
pEle; //HTMLCollection [ p ] 返回数组
pEle[0]; //<p> 返回标签
</script>