属性节点和属性

属性节点讲解

元素的几个属性 来获取属性值

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]在里面会报错 可以在外面写函数放进去