属性、节点操作方法

属性、节点操作方法

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

id 获取id值 className 获取class属性值 title 获取对应的title属性值 style样式属性

innerHTML获取元素内容 innerText获取元素文本 tagName获取name的name值

对于 input元素 对应存在 name属性值 value属性值

对于 img元素 存在 src属性值

对于 a标签 存在href属性值

对于标签本身天生自带的属性 我们可以通过标签元素.属性名来获取对于的属性值

console.log( document.getElementsByTagName('div')[0].id);
console.log( document.getElementsByTagName('a')[0].href);
console.log( document.getElementsByTagName('div')[0].opo); //后天加上去不能获取
var box = document.getElementsByTagName('div')[0]

通过attributes 获取所有的属性节点

 console.log(box.attributes); //返回的是一个nameNodeMap 里面包含的是多个数据

nameNodeMap里面包含下标 以及length属性 还存在增改(set)删(remove)查(get)的方法

var attrs = box.attributes //获取所有的属性节点
//访问里面的属性节点个数
console.log(attrs.length);//返回为3

通过下标进行访问

console.log(attrs[0] );//访问第一个属性节点

还可以通过键(属性名)来进行访问

 console.log(attrs['opo']);//访问opo属性节点

通过attrs.属性名 和attrs[‘opo’]一致的

 console.log(attrs.opo);

通过item方法 获取是getNamedItem方法

console.log(attrs.item(0)); //访问第一个属性 attrs[0] = attrs.item(0)
console.log(attrs.getNamedItem('opo')); 
//访问名字为opo的属性内容 attrs['opo'] = attrs.getNamedItem('opo')         

设置 获取的是一个节点对象 attr对象 属性节点对象 设置的时候也要是属性节点对象

attrs.opo = attrs.id //只读的 不能直接进行赋值

删除opo这个属性名对应的属性节点

 attrs.removeNamedItem('opo')

attr表示属性节点对象 设置方法需要传进进去一个新的属性节点对象

创建一个属性节点对象 参数为属性名

var opo = document.createAttribute('opo')
opo.value = 'hello' //给节点属性值
attrs.setNamedItem(opo) //设置属性节点
console.log(attrs);

属性操作 对于本身天生就有的属性 直接通过元素.属性名 来获取属性值

属性节点操作 attr 属性节点

attributes 获取所有的属性节点 返回的是一个NameNodeMap

可以通过 下标以及对应的属性名进行方法

NameNodeMap 里面存在三个方法 getNamedItem 获取属性节点 removeNameItem 移除属性节点

setNameItem 属性节点

属性节点不能直接进行赋值 需要修改可以调用setNameItem 里面需要传入一个新的属性节点

属性操作

对于本身天生就有的属性 直接通过元素.属性名 来获取属性值

所有的标签天生就有的属性 id class style title

访问对应的class属性的属性值

var box = document.getElementById('box')
console.log(box.className); //对于本身天生就有的
console.log(document.getElementsByTagName('a')[0].href);
// 也可以直接给这个属性赋值 来进行更改
box.className = '你吃饭了吗'
//对于本身不是天生就有的
console.log( box.name) //访问不到的 返回值为undefined

可以通过getAttribute 来进行获取 （只是里面的属性都可以获取）

var name = box.getAttribute('name') //参数1为属性名 类型为string
console.log(name);
var boxClass = box.getAttribute('class') //参数1为属性名
console.log(boxClass);

可以通过对应的方法进行设置 setAttribute

box.setAttribute('username','123') //参数1为属性名 参数2为属性值 俩个类型都是string
//设置一个属性 属性名为username 属性值为123

删除 参数你需要删除的属性名 removeAttribute

 box.removeAttribute('class') //删除class属性

元素的三个方法 element的方法 getAttribute setAttribute removeAttribute 属性操作（常用的）

节点操作

元素节点操作的方法

创建属性节点 必须要给属性节点赋值

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.innerText = '我是p标签'
p.style.background = 'red'

创建文本节点

var text = document.createTextNode('hello 你好') 
p.appendChild(text) //将文本节点添加到p标签 从后面添加

insertBefore添加子节点到某个子节点前面 第一个你需要添加的节点 第二个是子节点

var hello = document.createTextNode('XXXXXX')
p.insertBefore(hello,text) //将hello对应的节点添加到text节点之前 里面的俩个节点都会存在于p这个节点中

克隆一个新的节点

var text1 = text.cloneNode()
p.appendChild(text1)

创建属性节点 必须要给属性节点赋值

var a = document.createAttribute('name')//创建属性节点 必须要给属性节点赋值
a.value = 'rose' 

设置属性节点（一般不用）建议使用 setAttribute

p.setAttributeNode(a) 
body.replaceChild(p,div) //将div替换为p

元素节点之间的关系

元素节点之间的关系 主要划分为父元素 子元素 兄弟元素（同胞元素）

<div id="box">
    <span>000</span>
    abc<div id="innerBox">123<b>4</b>456</div>efg
    <p>2</p>
    <a>3</a>
</div>
<script>
    var innerBox = document.getElementById('innerBox') //获取innerbox这个元素
</script>

box 里面包含了div和对应的p和a标签

innerbox里面包含了b标签

父节点 parentNode （一个）

console.log( innerBox.parentNode); //获取父节点 就是box 返回Node
console.log(innerBox.parentElement); //获取父元素 返回element

子节点 children 获取子节点（获取的是多个）返回的是一个htmlCollection

console.log(innerBox.children); //获取所有的子元素节点
console.log(innerBox.children[0]);//获取第一个子元素（常用的）

节点集合

console.log(innerBox.childNodes); //返回所有的子节点（会包含元素节点 文本节点 属性节点）

获取第一个子节点相当于 innerBox.children[0] 元素节点 firstChild这个获取的包含了元素节点 以及文本节点

console.log(innerBox.firstChild);//获取第一个子节点（包含文本节点以及元素节点）
console.log(innerBox.lastChild); //获取最后一个子节点（包含文本节点以及元素节点）

兄弟 处在一级的标签元素

下一个兄弟 next 下一个 pre是上一个

console.log(innerBox.nextSibling); //下一个兄弟节点 efg
console.log(innerBox.previousSibling); //上一个兄弟节点 abc

上一个兄弟元素节点

console.log(innerBox.previousElementSibling); //没有返回的是null 返回span

下一个兄弟元素节点

console.log(innerBox.nextElementSibling); //没有返回null  找到p标签

练习：通过selected 获取对应的box 获取b标签里面的内容

获取外面的box的元素里面的值 获取外层div里面的name属性

<div name="jack">
    <div class="box">
        hello
        <a href="http://www.baidu.com">
            <ul>
                <li>123</li>
                <li id="selected">456</li>
                <li>789</li>
            </ul>
        </a>
        <b>哈哈哈哈</b>
    </div>
</div>
<div class="box">你找到我了吗</div>

通过selected 获取对应的box 获取b标签里面的内容

获取外面的box的元素里面的值 获取外层div里面的name属性

var selected = document.getElementById('selected')
console.log(selected.parentNode.parentNode.parentNode);//获取对应的box
console.log(selected.parentNode.parentNode.nextElementSibling.innerHTML);//获取b标签里面的内容 
console.log(selected.parentNode.parentNode.parentNode.parentNode.nextElementSibling.innerText);//获取外面的box的元素里面的值
console.log(selected.parentNode.parentNode.parentNode.parentNode.getAttribute('name'))   //获取外层div里面的name属性

onScroll

表示的是滚动栏滚动事件

给window添加一个滚动栏滚动事件

<head>
    <style>
        body{
            height: 5000px;
        }
        div{
            width: 200px;
            height: 200px;
            background: red;
            position: fixed;
        }
        #back{
            right:0 ;
            bottom: 0;
            display: none;
        }
    </style>
<head/>
<body>
    <div></div>
    <div id="back">回到顶部</div>
</body>

给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

}