JavaScript(9) - DOM属性节点,DOM节点间关系,DOM操作

选项：C

于 2022-03-25 20:23:49 发布

阅读量812

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46106512/article/details/123744170

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

DOM的概念
DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

  HTML-页面结构   css-页面样式    javascript –页面行为操作

DOM的概念

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM属性节点

1, 属性节点的属性

attributes属性: 获取某元素节点的所有属性节点(返回一个数组)。

var box = document.getElementById(‘box’);
box.attributes;   //[object NamedNodeMap]
box.attributes.length;   //返回属性节点个数 
box.attributes[0];   //[object Attr], 返回第一个属性节点 

box.attributes[0].nodeType;    //2，节点类型 
box.attributes[0].nodeName;  //属性名称 
box.attributes[0].nodeValue;   //属性值 

box.attributes[‘id’];   //返回属性名称为id的节点
box.attributes.getNamedItem(‘id’);   //返回属性名称为id的节点

2, 属性节点操作的三个函数

我们通过三个函数可以操作元素的属性:

  getAttribute(): 通过属性名获取对应的属性值 
  setAttribute(): 设置一个key-value形式的属性键值对  
  removeAttribute(): 移除指定的属性

getAttribute()

getAttribute()方法将获取元素中某个属性的值。它和直接使用点语法(.属性)获取属性值的方法有一定区别.

例如:

document.getElementById(‘box’).getAttribute(‘id’);  获取元素的id属性值 document.getElementById(‘box’).id;  获取元素的id属性值(点语法)
document.getElementById(‘box’).getAttribute(‘class’); 获取元素的class值
document.getElementById(‘box’).className; 获取元素的class值(点语法)

//获取元素的自定义属性值(不可以使用点语法)
document.getElementById(‘box’).getAttribute(bbb);  
document.getElementById(‘box’).bbb; 无法获取元素的自定义属性值

setAttribute()

setAttribute()方法可以给元素添加属性; 如果属性已经存在, 则会覆盖原来的属性; 需要传入两个参数：属性名和属性值.

例如:

//设置属性和值
document.getElementById(‘box’).setAttribute(‘align’, ‘center’); 
//设置自定义的属性和值
document.getElementById(‘box’).setAttribute(‘bbb’, ‘ccc’); 

removeAttribute()
      removeAttribute()方法可以移除元素的属性。

//移除属性
 document.getElementById('box').removeAttribute('style');

总结

 <body>
    <div opo = "a" id = "box" name = "张三"></div>

    <script>
        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]
        //通过attribute 获取所有的属性节点
        console.log(box.attributes);//返回的是一个nameNodeMap 里面包含的是多个数据
        //nameNodeMap里面包含下标 以及length属性 还存在增删(remove)改(set)查(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.属性名 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)
        console.log(attrs);
        
        //属性操作 对于本身天生就有的属性 直接通过元素.属性名 来获取属性值
        //属性节点操作 attr 属性节点
        //attributes 获取所有的属性节点 返回一个NameNodeMap
        //可以通过 下标以及对应的属性名进行方法
        // NameNodeMap 里面存着三个方法 getNamedItem 获取属性节点 removeNameItem 移除属性节点 setNameItem 属性节点
        //属性节点不能直接进行赋值 需要可以调用setNameItem 里面需要传入一个新的属性节点
        //  var opo = document.createAttribute("opo") //创建属性节点
        //  opo.value = "hello" //给属性节点属性值

    </script>
</body>

二、DOM节点间关系

1,元素节点间关系的相关属性

parentNode、previousSibling、nextSibling

parentNode: 属性返回该节点的父节点，
previousSibling: 属性返回该节点的前一个同级节点，
nextSibling: 属性返回该节点的后一个同级节点。

例如:

console.log(box.parentNode.nodeName);  //获取父节点的标签名 console.log(box.lastChild.previousSibling); //获取前一个同级节点
console.log(box.firstChild.nextSibling);       //获取后一个同级节点

总结

<body>
    <div id = "box">
        abc<div id = "innerBox">123<b>4</b>456</div>efg
        <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
        //子节点 children 获取子节点 (获取的是多个) 返回的是一个htmlCollection
        console.log(innerBox.children);//获取所有的子元素节点
        console.log(innerBox.children[0]);//获取第一个子元素(常用)
        //获取第一个子节点相当于 innerBox.children[0] 元素节点 fristChild这个获取的包含了元素节点 以及文本节点
        console.log(innerBox.firstChild);//获取第一个子节点(包含文本节点以及元素节点)
        console.log(innerBox.lastChild);//获取最后一个子节点(包含文本节点以及元素节点)
        //兄弟 处于一级的标签元素
        //下一个兄弟 next 下一个 怕热是一个
        console.log(innerBox.nextSibling);//下一个兄弟节点 efg
        console.log(innerBox.previousSibling);//是一个兄弟节点 abc
        //上一个兄弟元素节点
        console.log(innerBox.previousElementSibling);//没有返回的是null 返回的是span
        //下一个兄弟元素节点
        console.log(innerBox.nexElementSinling);//没有返回null找到p标签
    </script>
    
</body>

三、DOM操作

DOM节点操作

  DOM节点操作指的是: 创建节点、复制节点、插入节点、删除节点和替换节点等.

DOM操作所涉及的方法有:

  createElement(); 创建一个元素节点
  appendChild(); 添加一个新子节点到子节点的末尾
  createTextNode(); 创建一个文本节点
  insertBefore(); 将新节点插入到某节点前面
  replaceChild(); 将新节点替换旧节点
  cloneNode(); 复制节点
  removeChild(); 移除节点

1, createElement()

  createElement()方法可以创建一个元素节点。

例如:

var newEle = document.createElement(‘div’);

2, appendChild()

appendChild()方法可以将一个新节点添加到某个节点的子节点列表的末尾上。

例如:

var box = document.getElementById(‘box’); 
var pNode = document.createElement(‘p’);   //创建一个新元素节点<p> 
box.appendChild(pNode);   //把新元素节点<p>添加box节点的子节点末尾

3, createTextNode()

createTextNode() 方法可以创建一个文本节点。

例如:

var textNode = document.createTextNode(‘段落’); //创建一个文本节点
p.appendChild(textNode);  //将文本节点添加到子节点末尾

示例:
封装一个函数, 带两个参数(元素节点的名称, 该节点的文本内容), 返回一个带文本内容的元素节点

4, insertBefore()

insertBefore()方法可以把节点插入到指定节点的前面

。

例如:

//通过父节点调用, 在box之前插入一个新节点p;
//第一个参数为新节点
box.parentNode.insertBefore(p, box);

5, replaceChild()

replaceChild()方法可以把节点替换成指定的节点。

例如:

//通过父节点调用, 新节点p替换了旧节点div
//第一个参数为新节点, 第二个参数为旧节点
box.parentNode.replaceChild(p, box);

6, cloneNode()

cloneNode()方法可以把子节点复制出来。

例如:

//获取第一个子节点, true表示复制标签和内容 , false表示只复制标签
var box = document.getElementById(‘box’);
Var newNode = box.firstChild.cloneNode(true); 
box.appendChild(newNode);  //添加到子节点列表末尾

7, removeChild()

removeChild()方法可以删除指定子节点

例如:

//通过父节点调用, 来删除指定子节点
box.parentNode.removeChild(box);

在JS事件中, this表示触发事件的元素节点对象;

var box = document.getElementById('box'); 
box.onclick = function() { 
      console.log(this.nodeName);  //this表示box对象 
};

通过for循环添加事件, 使用this
var aInput = document.getElementsByTagName('input');
for (var i=0; i<aInput.length; i++) { 
        aInput[i].onclick = function() { 
                console.log(this.value);  //这里的this表示被点击的那个input元素节点对象 
        };
   }

总结

<body>
    <div id="box" class="content" name = "hello"></div>
    <a href="http://www.baidu.com">点击</a>


    <script>
        //属性操作 对于本身天性就有的属性 直接通过元素.属性名 来获取属性值
        var box = document.getElementById("box")
        //访问对应的class属性的属性值
        //所有的标签天生就有的属性 id class styletitle
        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属性值
        //设置一个属性 属性名为username 属性值为123
        //删除 参数你需要删除的属性名 removeAttribute
        box.removeAttribute('class')//删除class属性
    </script>
    
</body>

练习

<body>
    <input type="text" placeholder="id">
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="手机号">
    <button onclick="save()">保存</button>

    <table border="1px" id="tableBox">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>Tel</th>
            <th>操作</th>
        </tr>
    </table>


    <script>
        //1动态表格的创建,在输入框中输入内容后
        //在输入框中输入内容,点击保存在表格末尾添加一条数据
        function save(){
            var inps = document.getElementsByTagName("input")
            var tr = document.createElement("tr")//创建tr
            for(var i = 0; i<4; i++){
                var td = document.createElement('td')//创建td
                if(i==3){//如果是最后一个td
                    var a = document.createElement('a')
                    // a.href = "#"
                    a.setAttribute('href','#')
                    a.innerText = "删除"
                    td.appendChild(a)//将a加给td
                }else{
                    var text = document.createTextNode(inps[i].value)
                    td.appendChild(text)//将文本加给td
                }
                tr.appendChild(td) //将td加给tr
            }
            var tableBox = document.getElementById("tableBox")//获取表格
            tableBox.appendChild(tr)//将tr加给table
            //点击删除则会删除对应的数据
            // 获取所有a标签 将点击事件加给他 放在外面他获取不到a 因为他只执行一次
            var collectionA = document.getElementsByTagName('a')//获取到所有的a 对应返回htmlCollection
            //点击事件只能给对应的元素
            for(var i = 0; i<collectionA.length;i++){
                //加所有的a加点击事件
                collectionA[i].onclick = function(){
                    //this表示当前的触发元素 this获取的是对应你点击的元素
        
                    //删除对应的数据
                    tableBox.removeChild(this.parentNode.parentNode)
                }
            }
        }
    </script>

选项：C

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(9) - DOM属性节点,DOM节点间关系,DOM操作

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、DOM属性节点1, 属性节点的属性2, 属性节点操作的三个函数getAttribute()setAttribute()总结二、DOM节点间关系1,元素节点间关系的相关属性总结三、DOM操作DOM节点操作DOM操作所涉及的方法有:1, createElement()2, appendChild()3, createTextNode()4, insertBefore()5, replaceChild()6, cloneNode.
复制链接

扫一扫