DOM补充节点

原创已于 2022-03-29 12:39:26 修改 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-03-27 22:50:22 首次发布

javascr 同时被 2 个专栏收录

15 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

节点共有属性（元素节点有，属性节点有，文本节点有）

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 
}