day10 DOM下

一、元素节点

　　 // innerHTML   innerText

        // id 获取id值  className获取class属性值  title获取对应title属性值  style属性值

        // 对于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')[O]

        //通过attributes获取所有的属性

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

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

        var attrs = box.attributes

        //通过下标进行访问

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

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

        console.log(attrs [ 'opo']);//访问opo属性的内容

        // 访问里面的属性个数

        console.log(sttrs.length);//返回为3

        // 第三种方法

        // 通过item方法  获取是getNameItem方法

        console.log(attrs(0));//访问第一个属性 sttrs[0]=attrs.item(0)

        console.log(attrs.getNameItem('opo'));//访问名字为opo的属性内容  sttrs['opo']=attrs.getNameItem('opo')

        // 第四种 通过attrs.属性名  与attrs['opo']一致

        console.log(attrs.opo);

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

        attrs.opo="opo='123'"

        attrs.opo=attrs.id//只读的  不能直接进行赋值  可以重新设置

        attrs.removeNamedItem('opo')//删除这个属性名对应的属性节点

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

        // 属性节点操作  sttr属性节点

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

        // 可以通过下标以及对应的属性名

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

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

        // var opo = document.createAttribute( 'opo ')创建属性节点

        //opo.value = 'hello’//给属性节点属性值

 

二、元素属性

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

        var box = document.getElementById( ' box ')

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

        //所有的标签天生就有的属性id class style titleconsole.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

        //删除参数你需要删除的属性名removeAttributebox.

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

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

        //NameNodeMap里面存在三个方法 getNamedItem获取属性节点 removeNameItem移除属性节点属性节点操作(一般不用)

        // 属性节点是属于节点对象  属性是属于元素的一个属性  属性在元素中被获取为节点

 

三、元素节点之间的关系

　　<div class="box">

        <div class="innerbox">

            <b>4</b>

        </div>

        <p>2</p>

        <a>3</a>

    </div>

    <script>

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

        // 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])//获取第一个子元素，不包含文本节点

        // 节点集合

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

        //获取第一个子节点  相当于 innerBox.children  firstChild这个获取的包含元素节点   还包含文本节点

        console.log(innerBox.firstChild);//获取第一个子节点(包含文本节点)

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

        // 兄弟  处在一级的标签元素  多个  返回的是htmlCollection

        console.log(innerBox.nextSibling);//下一个兄弟  efg  包含空格  换行

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

        // 上一个兄弟元素节点

        console.log(innerBox.previousElementSibling);//没有返回null  有就返回  不包含文本

        // 下一个兄弟元素节点

        console.log(innerBox.nextElementSibling);//没有返回null

    </script>

 

四、元素节点操作方法

　　document.createAttribute("属性名").value='属性值'//创建属性节点  必须要给属性节点赋值

        //1. 创建元素节点  需要传递标签名第一个参数  第二个参数为选项可省略

        var div=document.createElement('div')//创建一个元素 div  返回的类型是一个element

        div.className='hello'//给创建的div元素指定对应的class属性值

        div.innerText='吃饭了吗'//给创建的div设置文本

        //2. 添加子节点到最后  document不能直接添加子节点

        var body=document.getElementsByTagName('body')[0]//获取body

        body.appendChild(div)//给body添加一个子节点

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

        //3. 删除子节点

        body.removeChild(div)

        // 4.替换子节点

        var p=document.createElement('p')

        p.innerText='我是p'

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

        // 创建文本节点

        var text=document.createTextNode('你师祖')

        p.appendChild(text)//将文本添加到p标签   从后面添加

        // 克隆节点

        var text1=text.cloneNode//克隆一个新节点

        // 设置属性节点

        var uname=document.createAttribute('uname')

        uname.value="zhu"

        p.setAttributeNode(uname)//设置属性节点一般不用  建议使用 setAttribute

 

五、onscroll  滚动栏滚动事件

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

        window.onscroll=function(){

            console.log("触发了");

            //获取滚动栏离上面的距离  离上面的顶层距离  可视区域的距离

            // 具备浏览器兼容问题

            var scollTop=document.documentElement.scrollTop  | document.body.scrollTop

            document.querySelector('div').innerText=scollTop

        }