属性节点讲解
元素的几个属性 来获取属性值
innerHTML innerText tagName
id 获取id值 className 获取class属性值 title 获取对应的title属性值 style样式属性
对于 input元素 对应存在 name属性值 value属性值
对于 img元素 存在 src元素
对于 a标签 存在href属性值
对于标签本身天生自带的属性 我们可以通过标签元素.属性名来来获取对应的属性值
<div opo='a'></div> console.log(document.getElementsByTagName('div')[0].opo)//后天加上去的不能获取
通过attributes 获取所有的属性节点(包含后天加的)
返回的是以一个nameNodeMap 里面包含的是多个数据(键值对的形式)
nameNodeMap 里面包含下标 以及length属性 还存在增改(set) 删(remove)查(get)的方法
访问方式
var box = document.getElementsByTagName('div') var attrs = box.atrributes 通过下标进行返回 attrs[0] //访问第一个属性节点 还可以通过键(属性名)来进行访问 attrs['opo'] //访问opo属性节点 访问里面的属性个数 attrs.length // 返回为3 通过item方法 通过getNamedItem方法 attrs.item(0) 访问第一个属性节点 //attrs.item(0) = attrs[0] attrs.getNamedItem('opo')//访问名字为opo的属性内容 attrs['opo'] = attrs.getNamedItem('opo') 通过atters.属性名 attrs['opo']一致的 attes.opo
设置
获取的是一个节点对象 attr对象 属性节点对象 设置的时候也要是属性节点对象
attrs.opo = attrs.id 不能够这样赋值 没有用
attrs.removeNamedItem('opo')//删除opo这个属性名对应的属性节点
attr表示属性节点对象 设置方法需要传进去一个新的属性节点对象
创建以一个属性节点对象 参数为属性名
var opo = document.createAttribute('opo')//创建以一个属性节点对象 参数为属性名 opo.value = 'hello'//给节点属性值 attrs.setNamedItem(opo)
总结
1.属性操作 对于本身天生就有的属性 直接通过元素.属性名 来获取属性值
2.属性节点操作 attr 属性节点
3.attributes 获取所有的属性节点 返回的是一个 NameNodeMap
4.可以通过 下标以及对应的属性名进行访问
5.NameNodeMap 里面存在三个方法
getNamedItem 获取属性节点
removeNamedItem 移除属性节点
setNamedItem 设置属性节点
6.属性节点不能直接进行赋值 需要修改可以调用 setNamedItem 里面需要传入一个新的属性节点
var opo = document.createAttribute('opo') opp.value = 'hello'//给节点属性值 attrs.setNamedItem(opo)
不是天生就有的属性可以通过 (常用)
获取: getAttribute() 参数1为属性名string类型
设置: setAttribute()参数1为属性名 参数2为属性值 两个类型都是string
删除: 参数为你需要删除的属性名
removeAttribute()
DOM元素节点间的关系(属性可以通过元素获取)
元素节点之间的关系 主要划分为 父元素 子元素 兄弟元素(同胞元素)
父节点: parentNode是属性 获取父元素节点 返回你的父元素节点
parentElement // 获取父元素
这两个返回类型不一样一个是 node 一个是element
子节点: children 获取所有子元素节点(获取的是多个) 返回的是一个htmlcollection
.childNodes //返回所有的子节点(会包含元素节点 文本节点 属性节点)
children[0]获取第一个子元素 (常用)
firstChild(获取最前面一个) lastChild(获取最后面一个)
这个获取的包含了元素节点 文本节点(父元素有内容在前面会显示内容)
兄弟节点:处在一级的标签元素
上一个兄弟 next 上一个pre
.nextSibling 下一个兄弟节点
.previousSibling 上一个兄弟节点
上一个兄弟元素节点(不会找文本只会找元素)
.previousElementSibling // 没有返回null 有就返回
下一个兄弟元素节点
.nextElementSibling //没有返回null
节点操作的方法
元素节点操作的方法
创建元素节点
创建属性节点 .createAttribute('属性名').value = '属性值' //创建属性节点 必须要给属性节点赋值 创建元素节点 需要传递标签名 第一个参数标签名 第二个参数为选项可省略 var div = document.createElement('div') //创一个元素 div 返回的类型是一个element div.className = 'hello' //给创建的div元素指定对应的class 属性值 div.innerText = '你吃饭了吗' //给创建的div设置文本 需要加进去 要添加子节点
添加子节点
document 不能直接添加子节点
.appendChild
需要通过元素添加
var body = document.getElementsByTagName('body')[0] body.appendChild(div)//给body添加一个子节点
删除子节点
body.removeChild(div)
替换节点
.replaceChild(p,div)
var p = document.createElement('p') p.innerText = '我是p标签' body.replaceChild(p,div)
创建文本节点(加在后面)
.createTextNode
var text = document.createTextNode('hello 你好') p.appendChild(text) insertBefore添加子节点到某个子节点之前 第一个你需要添加的节点 第二个是子节点 var hello = document.createElement('xxxxx') p.insertBefore(hello,text)//将hello对应的节点添加到text节点之前 里面的两个节点都会存在于拍这个节点中
克隆操作
var text1 = text.cloneNode()//克隆一个新的节点 p.appendChild(text1)
创建属性节点
var a = document.createAttribute('name') //创建属性节点 必须要给属性节点赋值 a.value = 'rose' p.setAttributeNode(a)//设置属性节点(一般不用) 建议使用setAttribute
onScroll 表示的是滚动栏事件
//给window添加一个滚动栏滚动事件 window.onscroll = function(){ // console.log('触发了'); //获取滚动栏离上面的距离 离上面顶层的距离 可视区域的距离 // 具备浏览器兼容问题 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 // document.body.scrollTop = 0 }
for 一开始就执行完了 i变成a.length var 声明的是伪全局变量
onclick 点击的时候才执行 a[i]在里面会报错 可以在外面写函数放进去