DOM节点操作

猪猪猪a

已于 2022-03-23 10:28:48 修改

阅读量658

点赞数 3

分类专栏： DOM 文章标签： javascript

于 2022-03-23 10:25:53 首次发布

本文链接：https://blog.csdn.net/weixin_46124651/article/details/123678976

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM(document object model)文档对象模型

作用如下：

1、动态操作元素的属性
2、动态的操作元素的样式属性
3、动态的实现元素的节点操作

获取元素节点

getElementById() 根据元素id获取一个元素节点

<div id='box1'>111</div>
<script>
    let box1=getElementById('box1');
</script>

getElementsByClassName() 根据元素class获取多个元素节点

<ul>
     <li class="items"></li>
     <li class="items"></li>
     <li class="items"></li>
     <li class="items"></li>
     <li class="items"></li>
</ul>
let items=getElementsByClassName('items');
//带s的获取到的是一个数组，得循环遍历
for(var i in items){
   console.log(items[i]);
}

getElementsByTagName()返回指定标签名来获取一组元素对象

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
let items=getElementsByTagName('li');
//带s的获取到的是一个数组，得循环遍历
for(var i in items){
   console.log(items[i]);
}

getElementsByName()返回name属性值的一组元素节点

主要用于表单项

<input name="names" type='text'>
<input type="password" name="names">
let names=document.getElementsByName('names');

querySelector() 返回指定选择器的第一个元素对象

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
let item=document.querySelector('ul>li');//返回ul下的第一个li

querySelectorAll() 返回指定选择器的所有对象集合

<ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
</ul>
let item=document.querySelectorAll('ul>li');//返回ul下的所有li

其他获取节点方法

// ele.nextSibling 获取元素的下一个兄弟节点
// ele.previousSibling 获取元素的上一个兄弟节点
// ele.nodeName 节点名称
// ele.nodeValue 节点的值
// ele.nodeType 节点类型
// ele.children 获取当前元素所有的子节点
// ele.lastChild 获取当前元素的最后一个子节点
// ele.parentNode 获取当前元素的父节点
// document.body 返回某个节点对象
// document.head 返回头部节点对象

属性节点

获取+设置属性的值

方法一

getAttribute('src')//获取元素属性
element.setAttribute('height','350')//设置属性

方法二

读取谁就要.谁 XXX.value xxx.name xxx.type 特殊就是class属性，需要通过className来读取可以通过classList来获取一组class

element.属性//获取元素属性
element.属性=''//设置元素属性

增加属性：增加什么就 . 什么

element.className//增加class属性
element.id='';//增加id属性

修改属性内容

对于没有结束标签的元素，不可使用

ele.innerText//元素内部的文本
ele.innerHTML//元素内部的html代码

样式属性

操作元素样式属性:内联样式

ele.style.css样式属性='值'

divEle.style.fontSize="3em";
divEle.style.position = "relative";
divEle.style.left="100px"
divEle.style.top="100px"
divEle.style.border="2px solid red"

.....之前css怎么写，现在就怎么写

创建元素节点

document.createElement(tagName) 创建节点

var div = document.createElement('div');//<div>shihh</div>
div.innerHTML='shihh';
var img =document.createElement('img');//img

document.createTextNode ='value' 创建文本节点

var text=document.createTextNode='xxxx';
var p=document.createElement('p');//创建一个p
p.innerText=text;//将创建的文本节点放进p元素里

插入元素节点

ele.appendChild(ele) 给元素追加一个子节点

var div = document.createElement('div');//创建一个节点div
var a=document.createElement('a')//创建一个节点a
div.appendChild(a);//将a追加给div 将a放进div里

insertAdjacentElement 向元素的指定位置插入子元素

 元素.insertAdjacentElement('位置', 元素);

insertAdjacentHTML 向元素的指定位置插入HTML代码

元素.insertAdjacentHTML('位置', 'HTML代码');

insertAdjacentText 向元素的指定位置插入文本内容

元素.insertAdjacentText('位置', '文本内容');

注意：位置需要传递一个字符串作为参数

 'beforebegin' 开始标签前，成为当前元素的前一个兄弟元素
 'afterbegin' 开始标签后，成为当前元素的第一个子元素
 'beforeend' 结束标签前，成为当前元素的最后一个子元素
 'afterend' 结束标签后，成为当前元素的后一个兄弟元素

复制元素节点

ele.cloneNode(false) 浅复制

只复制节点本身

var div =document.createElement('div');//创建一个节点div
var a=document.createElement('a')//创建一个节点a
var a2=a.cloneNode(a);//复制节点a 给a2
div.appendChild(a);//将a追加给div 将a放进div里
div.appendChild(a2);//将a2放进div里

ele.cloneNode(true) 深复制

对节点进行深复制（复制节点本身及所有的后代节点）

注意：一个节点不能追加多次，只能重新克隆一个节点或者创建一个节点追加

删除元素节点

ele.remove() 删除元素自身

fathere.removeChlid() 删除元素的子节点

<table>
   <tr>
    <td>
       <button></button>
    </td>
   </tr>    
</table>
let table=document.querySelector('table');
let trs=document.querySelector('tr');
let tds=document.querySelectorAll('td');
let btn=document.querySelectorAll('button');
//点击按钮删除一行tr;
btn.onclick=fouction(){
    table.removeChild(this.parentNode.parentNode);
    //找到要删除对象的父节点(table)，和要删除的对象（button的父节点的父节点 --tr）
}

小案例

用table 表格遍历（动态生成dom）

//动态的创建一个表格，并传入数据，添加一个删除按钮，实现点击按钮删除当前一行 
var dataList = [{
            sid: "201804111",
            name: "易烊千玺",
            sex: "男",
            like: "街舞",
            tel: "13838385438",
            address: "湖北武汉",
            subjects: "软件工程"
        }, {
            sid: "201804112",
            name: "任嘉伦",
            sex: "男",
            like: "拍戏跳舞",
            tel: "13838385438",
            address: "湖北武汉",
            subjects: "软件工程"
        }, {
            sid: "201804113",
            name: "魏大勋",
            sex: "男",
            like: "讲笑话",
            tel: "13838385438",
            address: "湖北武汉",
            subjects: "软件工程"
        }, {
            sid: "201804114",
            name: "张颜齐",
            sex: "男",
            like: "唱歌跳舞",
            tel: "13838385438",
            address: "湖北武汉",
            subjects: "软件工程"
        }, {
            sid: "201804111",
            name: "鹿晗",
            sex: "男",
            like: "关晓彤",
            tel: "13838385438",
            address: "湖北武汉",
            subjects: "软件工程"
        }];
        var table = document.createElement('table');
        table.border = '1';
        table.width = '600';
        table.style.textAlign = "center";
        table.style.borderColor = 'pink';
        table.style.height = '200px';
        table.style.margin = '20px auto';
        //创建表头
        var tr = document.createElement('tr');
        table.appendChild(tr);
        var colsTitle = ['学号', '姓名', '性别', '爱好', '手机号', '籍贯', '学科', '操作']
        for (var i in colsTitle) {
            var th = document.createElement('th');
            th.innerText = colsTitle[i];
            tr.appendChild(th);
        }
        //创建表格内容
        for (var k in dataList) {
            var tr = document.createElement('tr');
            table.appendChild(tr);
            for (var k2 in dataList[k]) {
                var td = document.createElement('td');
                td.innerText = dataList[k][k2];
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            tr.appendChild(td);
            var btn = document.createElement('button');
            //console.log(btn);
            btn.innerHTML = '删除';
            td.appendChild(btn);

        }
        document.body.appendChild(table);
        var tab = document.querySelector('table');
        var btns = document.getElementsByTagName('button');
        for (var y = 0; y < btns.length; y++) {
            btns[y].onclick = function() {
                if (confirm('你确定要删除这一行吗？')) {
                    var tr = document.querySelectorAll('tr');
                    tab.removeChild(this.parentNode.parentNode);
                }
            }
        }
    </script>

运行结果如下图：