节点共有属性(元素节点有,属性节点有,文本节点有)
var title = document.getElementsByTagName('title')[0]
console.log(title.nodeName); //nodeName节点名称
console.log(title.nodeType); //nodeType
//节点类型: 元素节点; 属性节点;文本节点
console.log(title.nodeValue);
//节点值 : 元素节点为null ; 属性节点 属性值 ; 文本节点 文本值;
子节点
var box = document.getElementById('box')
console.log(box.childElementCount); //返回节点的元素个数 1
console.log(box.childNodes); //返回所有的节点集合,返回类型是一个nodelist 包含所有的子节点
console.log(box.children) //返回子元素 返回的是一个htmlCollection 只包含了元素节点
属性节点
元素的几个属性
innerHTML innerText tagName
id 获取id值 ; className 获取classs属性值 ; title 获取对应的title属性值 style样式属性;
对于 input元素 对应存在 name属性值 value属性值
对于 img元素 存在src属性值
对于 a标签 存在href 属性值
获取属性节点
1.对于标签本身天生自带的属性,我们可以通过 标签元素.属性名 来获取对应的属性值
<div opo='a' name='张三' id='box' >
<a href="http://www.baidu.com"></a>
console.log(document.getElementsByTagName('div')[0].id);
console.log(document.getElementsByTagName('a')[0].href);
console.log(document.getELementsByTagName('div')[0].opo); //后面加上去的属性无法获取
2.通过 attributes 获取所有的属性节点
var attrs = box.attributes //获取所有的属性节点
console.log(box.attributes);
//返回的是一个nameNodeMap 里面包含的是多个数据
//nameNodeMap里面包含下标 以及length属性,还存在 增改(set) 删(remove) 查(get)的方法
console.log(attrs[0]); //通过下标访问第一个属性节点
console.log(attrs['opo']); //通过键(属性名)来进行访问opo属性节点
console.log(attrs.length); //访问里面的属性节点个数
3.通过 item 方法
//通过item方法 获取是getNamedItem方法
console.log(attrs.item(0)); //访问第一个属性 attrs[0] = attrs.item(0)
console.log(attrs.getNamedItem('opo')); //访问名字为opo的属性内容 attrs['opo'] = attrs.getNamedItem('opo')
4.通过attrs.属性名 attrs['opo']是一致的
console.log(attrs.opo); //通过键(属性名)来进行访问opo属性节点
设置 获取的是一个节点对象 attr对象 属性节点对象 设置的时候也要是属性节点对象
attrs.opo = attrs.id //只读的,不能直接进行赋值
attrs.removeNamedItem('opo'); //删除opo这个属性名对应的属性节点
//attrs表示属性节点对象,设置方法需要传进去一个新的属性节点对象
//创建一个属性节点对象 参数为属性名
var opo = document.createAttribute('opo')
opo.value = 'hello' //给节点设置属性值
attrs.setNamedItem(opo) //设置属性节点
console.log(attrs);
总结:
1.属性操作:对于本身天生就有的属性,直接通过元素,属性名 来获取属性值
2.属性节点操作: attributes 获取所有的属性节点,返回的是一个NameNodeMap
3.可以通过下标 以及对应的属性名进行方法
4.NameNodeMap 里面存在三个方法
1.getNamedItem 获取属性节点
2.removeNameItem 移除属性节点
3.setNameItem 设置属性节点
5.属性节点不能直接进行赋值 需要修改可以调用setNameItem 里面需要传入一个新的属性节点
属性操作方法
对于本身天生就有的属性,直接通过元素.元素名 来获取属性值
<div id="box" class="content" name="hello"></div>
<a href="http://www.baidu.com">点击</a>
var box = document.getElementById('box')
//访问对应的class属性的属性值
//所有的标签天生就有的属性值 id class style title
console.log(box.className); //对于本身天生就有的
console.log(document.getElementsByTagName('a')[0].href);
//也可以直接给这个属性赋值,来进行更改
box.className = '你吃饭了吗'
对于本身不是天生有的属性,可以通过 getAttribute 来进行获取(只要里面有的属性都可以获取)
console.log(box.name) //访问不到,返回值为undefined
var name = box.getAttribute('name') //参数1为属性名 类型为string
console.log(name);
通过对应的方法进行设置 setAttribute
//设置一个属性 属性名为username 属性值为123 box.setAttribute('username',123) //参数1 为属性名 参数2 为属性值 两个都是string
删除 你需要删除的属性名 removeAttribute
box.removeAttribute('class') //删除class属性
总结
元素的三个方法 element的方法 getAttribute setAttribute removeAttribute 属性操作(常用的)
NameNodeMap 里面存在三个方法 getNamedItem 获取属性节点 removeNameItem 移除属性节点 属性节点操作(一般不用)
属性节点是属于节点对象 ,属性是属于元素中的一个属性 ,属性在元素中被获取为节点
节点 对象 属性 是一个对象里面的属性
属性节点是对象 , 元素节点包含属性节点
var element = { //元素节点
age:18 //age就是一个属性
}
//统一获取的话,可以使用attributes 返回的一个属性节点集合
var element = { //元素节点
attr:{ //属性节点
age:18//属性
}
}
元素节点之间的关系
主要划分为父元素 子元素 兄弟元素(同胞元素)
<div id="box">
<span>000</span>
abc<div id="innerBox">123<b>4</b>456</div>efg
<p>2</p>
<a>3</a>
</div>
//box 里面包含了div和对应的p和a标签 //innerbox里面包含了b标签 var innerBox = document.getElementById('innerBox') //获取innerbox这个元素 // 父节点 parentNode (只有一个) console.log( innerBox.parentNode); //获取父节点 就是box 返回Node console.log(innerBox.parentElement); //获取父元素 返回element //子节点 children 获取子节点(获取的是多个)返回的是一个htmlCollection console.log(innerBox.children); //获取所有的子元素节点 console.log(innerBox.children[0]); //获取第一个子元素(常用的) //节点集合 consle.log(innerBOX.childNodes); //返回所有的子节点(会包含元素节点 文本节点 属性节点) //获取第一个/最后一个子节点(相当于 innerBox.children[0]元素节点) console.log(innerBox.firstChild); //获取第一个子节点(包含文本节点以及元素节点) console.log(innerBox.lastChild); //获取最后一个子节点(包含文本节点以及元素节点) //兄弟元素 处在同一级的标签元素 //下一个兄弟节点 nextSibling 上一个兄弟节点 previousSibling console.log(innerBox.nextSibling); //下一个兄弟节点 console.log(innerBox.previousSibling); //上一个兄弟节点 //上一个兄弟元素节点 console.log(innerBox.previousElementSibling); //没有就是返回null //下一个兄弟元素节点 console.log(innerBox.nextElementSibling); //没有返回null
元素节点操作的方法
document.createAttribute('属性名').value = '属性值' //创建属性节点 必须要给属性节点赋值 var div = document.createElement('div') //创建一个元素div 返回的类型是一个element div.className = 'hello' //给创建的div元素指定对应的class属性值 div.innerText = '你吃饭了吗' //给创建的div设置文本 //添加子节点 appendChild document不能直接添加子节点 var body = document.getElementsByTagName('body')[0] //获取body body.appendChild(div) //给body添加一个子节点 body.removeChild(div) //删除子节点 //替换子节点 var p = document.createElement('p') //替换为p标签 p.innerText = '我是p标签' // 设置属性值 p.style.background = 'red' //设置样式属性
创建文本节点
//将文本节点添加到p标签 从后面添加 var text = document.createTextNode('hello 你好') p.appendChild(text) //insertBefore添加子节点到某个子节点前面,第一个参数:你需要添加的节点 第二个参数:子节点 var hello = document.createTextNode('xxx') p.insertBefore(hello,text) //将hello对应的节点添加到text节点之前,里面的两个节点都会存在于P这个节点中 var text1 = text.cloneNode() //克隆一个新的节点 p.appendChild(text1) var a = document.createAttribute('name') //创建属性节点 必须要给属性节点赋值 a.value ='rose' p.setAttributeNode(a) //设置属性节点(一般不用) 建议使用setAttribute body.replaceChild(p,div) //将div替换为p
onScroll 滚动栏滚动事件
<div></div> <div id="back">回到顶部</div> //给window添加一个滚动栏滚动事件
window.onscroll = function(){
//获取滚动栏离上面的距离 离上面顶层的距离 可视区域的距离
//具备浏览器兼容问题
var scrollTop = document.documentElement.scrollTop | document.body.scrollTop
console.log(scrollTop);
document.querySelector('div').innerText = scrollTop
// 如果滚动栏超过2000的时候 出现回到顶部
if(scrollTop>=2000){
document.getElementById('back').style.display = 'block'}
else{
document.getElementById('back').style.display = 'none'}
}
//点击回到顶部上去
document.getElementById('back').onclick = function(){
//将对应的滚动值改为0
document.documentElement.scrollTop = 0
}