DOM属性操作

最新推荐文章于 2024-05-01 14:49:36 发布

IT YouZi

最新推荐文章于 2024-05-01 14:49:36 发布

阅读量111

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/w8789760/article/details/123869212

版权

DOM

元素的几个属性来获取属性值
innerHTML innerText tagName
id 获取id值 className 获取class属性值 title 获取对应的title属性值 style样式属性

 <div opo ='a' name="张三" id="box"></div>
    <a href="http://www.baidu.com"></a>
    <script>
     对于 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[0] );//访问第一个属性节点
 还可以通过键(属性名)来进行访问 
      console.log(attrs['opo']);//访问opo属性节点
 访问里面的属性节点个数
      console.log(attrs.length);//返回为3
 第三种方法
 通过item方法 获取是getNamedItem方法
        console.log(attrs.item(0)); //访问第一个属性 attrs[0] = attrs.item(0)
        console.log(attrs.getNamedItem('opo'));  //访问名字为opo的属性内容 attrs['opo'] = attrs.getNamedItem('opo')
 第四种 通过attrs.属性名 attrs['opo']一致的
        console.log(attrs.opo);
 设置 获取的是一个节点对象 attr对象 属性节点对象 设置的时候也要是属性节点对象
     attrs.opo = attrs.id //只读的 不能直接进行赋值
     attrs.removeNamedItem('opo') //删除opo这个属性名对应的属性节点
 attr表示属性节点对象 设置方法需要传进进去一个新的属性节点对象
 创建一个属性节点对象 参数为属性名
     var opo = document.createAttribute('opo')
     opo.value = 'hello' //给节点属性值
     attrs.setNamedItem(opo) //设置属性节点
    // attrs.opo = opo
     console.log(attrs);
 属性操作 对于本身天生就有的属性 直接通过元素.属性名 来获取属性值
 属性节点操作 attr 属性节点
 attributes 获取所有的属性节点 返回的是一个NameNodeMap
 可以通过 下标以及对应的属性名进行方法
    // NameNodeMap 里面存在三个方法 getNamedItem 获取属性节点 removeNameItem 移除属性节点
 setNameItem 属性节点
 属性节点不能直接进行赋值 需要修改可以调用setNameItem 里面需要传入一个新的属性节点
    // var opo = document.createAttribute('opo') 创建属性节点
    //  opo.value = 'hello' //给属性节点属性值
    </script>

属性操作

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

<div id="box" class="content"  name="hello"></div>
    <a href="http://www.baidu.com">点击</a>
    <script>
   属性操作 对于本身天生就有的属性 直接通过元素.属性名 来获取属性值
        var box = document.getElementById('box')
   访问对应的class属性的属性值
   所有的标签天生就有的属性 id class style title
        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 属性操作（常用的）
     NameNodeMap 里面存在三个方法: 
     getNamedItem 获取属性节点 
     removeNameItem 移除属性节点 属性节点操作（一般不用）
     属性节点是属于节点对象 属性是属于元素中的一个属性 属性在元素中被获取为节点
     节点 对象    属性是一个对象里面的属性
       属性节点是对象    元素节点包含属性节点
        // var element = {//元素节点
        //     age:18 //age就是一个属性
        // }
   统一获取的话 可以使用attributes 返回的一个属性节点集合
        // var element = { //元素节点
        //     attr:{ //属性节点
        //         age:18 //属性
        //     }
        // }
   </script>

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

 案例：
<div id="box">
        <span>000</span>
        abc<div id="innerBox">123<b>4</b>456</div>efg
        <p>2</p>
        <a>3</a>
    </div>
    通过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>
    <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[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标签里面的内容 
        var selected = document.getElementById('selected')
   获取外面的box的元素里面的值 获取外层div里面的name属性
        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属性
    </script>

< 元素节点操作的方法

    <script>
        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' 
        p.setAttributeNode(a) //设置属性节点（一般不用）建议使用 setAttribute
        body.replaceChild(p,div) //将div替换为p
        利用上面的方法 添加一个ul 然后再ul里面添加10个li 并且里面li显示的值为1-10
        再写个按钮 点击删除ul里面的单数为的li 再将最后一个li替换成a标签
    </script>