1.页面滚出去的高
页面只要滚动了就会触发
window.onscroll = function(){
var oTop = document.body.scrollTop ||document.documentElement.scrollTop;
console.log(oTop);
}
2.自定义属性和固有属性
-
固有属性
input 有value type … 设置固有属性 元素.属性名 = 属性值 -
自定义属性
设置自定义属性 (自己定义的属性 a ,b,class,)
语法: 元素.setAttribute(‘属性名’,‘属性值’)
-
获取
语法: 元素.getAttribute(‘属性名’) -
删除
语法: 元素.removeAttribute(‘属性名’)
3.节点类型
nodeType节点类型:获取的是一个数字
元素节点:1
属性节点:2
文本节点:3
注释节点:8
文档节点:9
- parentNode 父节点。
- children 当前节点的所有子节点(只有元素节点),即所有的元素-类型的子节点
- firstElementChild 当前节点的第一个元素类型的子节点。
- lastElementChild 当前节点的最后一个元素类型的子节点。
- previousElementSibling 访问前一个同胞元素类型的节点。
- nextElementSibling 访问后一个同胞元素类型的节点。
document.createElement(HTML标签名) //创建一个元素节点
document.createTextNode(文字) //创建一个文本节点
父节点.appendChild(newChild) //newChild 被添加到孩子列表中的末端。
父节点.insertBefore(newChild, referenceNode)
// 将 newChild 节点插入到 referenceNode 之前。
父节点.removeChild(oldChild)
//删除 oldChild子节点。
节点本身.remove();
//删除本身
父节点.replaceChild(newChild, oldChild)
//用newChild节点替换oldChild节点
ulDom.replaceChild( liDom , ulDom.children[1] );
4.获取非内间样式
如何获取非行间样式?js提供了一个方法:
window.getComputedStyle(oDiv,null)['width'] ;// 获取div的非行间样式
console.log(window.getComputedStyle(oDiv,null)['width']); // IE低版本不支持
// 那IE的写法:
元素.currentStyle['width']
兼容写法
非IE window.getComputedStyle(元素,null)['width']
IE 元素.currentStyle['width']
---------------------------------------------------------------------
function getStyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr]
}else{
return getComputedStyle(obj,null)[attr]
}
}
5.选项卡
<style>
div {
width: 300px;
height: 80px;
background-color: pink;
display: none;
}
</style>
<body>
<input type="button" value="教育">
<input type="button" value="娱乐">
<input type="button" value="新闻">
<div style="display: block;">教育内容</div>
<div>娱乐内容</div>
<div>新闻内容</div>
</body>```
```javascript
<script>
var oIpts = document.querySelectorAll('input')
var oDivs = document.querySelectorAll('div')
// 因为要给button按钮添加点击事件,所以需要循环遍历button,给每一个添加点击事件
for (var i = 0; i < oIpts.length; i++) {
// 把i变量存储到index属性中
oIpts[i].index = i;
oIpts[i].onclick = function () {
// this.index 指代的就是你点击的元素
for(var j = 0;j<oIpts.length;j++){
oIpts[j].style.background = ''
oDivs[j].style.display = 'none'
}
// 当前点击的元素变色
this.style.background = 'orange';
// 当前点击元素下标对应的div this.index
// this.index: 0 1 2
oDivs[this.index].style.display = 'block'
}
}
点击那个按钮下面就显示相应的内容