JavaScript DOM及其操作（操作元素和节点）

最新推荐文章于 2024-09-27 15:27:45 发布

莫道一龙

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量85

点赞数

分类专栏：原生 JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_57284405/article/details/131195334

版权

原生 JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

修改元素内容

Element.innerText 只显示纯文本,去除html标签,同时去除了空格和换行
Element.innerHTML 显示指定的元素的全部内容,包括HTML标签,同时保留空格和换行（极力推荐）
innerText与innerHTML的区别
- 使用innerText获取内容不识别HTML标签, 空格与换行
- 使用innerText设置内容 不识别HTML标签
- 使用innerHTML获取内容识别全部内容包括 HTML标签 ,会保留空格和换行
- 使用innerHTML设置内容识别可设置HTML标签

元素属性的操作

普通元素的属性操作

innerText、innerHTML 改变元素内容
src 、 href id、alt、title

表单元素的属性操作

type 、value、checked、selected、disabled

获取属性的值

元素对象.属性名

设置属性的值

元素对象.属性名 = 值

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>

样式属性的操作

操作样式的属性即通过js修改元素大小，颜色，位置等

常用方式

Element.style.样式=值 //行内样式操作修改行内样式权重较高
Element.className=“类名” //类名样式操作覆盖原先的类名
- Element.className=“ ” //值为空或null 可使元素的类名置空
- calssName是保留字,因此使用calssName来操作元素类名属性
Element.classList.add (“类名”) // 添加类名操作可添加多个不会覆盖原有的类名
- Element.classList.remove( “ 移除类名”) // 移除类名操作可移除多个类名
- Element.classList.toggle( “切换类名 ”) //切换类名无则添加，有则移除
- Element.calssList.contains( “类名” ) //是否包含此类名，返回布尔值判断是否为存在

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 js中对大小写敏感
            this.style.backgroundColor = 'purple';
            //别忘了加 单位 px
            this.style.width = '250px';
 // 2. 可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
   // 3. 如果想要保留原先的类名，可以多类名选择器
   // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

取消 a 标签的默认跳转

方法一: 在处理程序内的最后添加 return false ;
方法二: 在 a标签中加 javascript:;

//方法一: 事件处理程序中最后设置 return false;

<body>
<a id="link" href="https://www.baidu.com">点击</a>
//方式2：设置a标签的href属性值为：javascript:
 <a href="javascript:;">点击2</a>

<script>
    var link = document.getElementById('link');
    link.onclick = function(){
    alert('你好');
    // 方式1：取消a点击后的默认跳转行为 return false;
    return false;
    };
</script>
<body>

//方式2：设置a标签的href属性值为：javascript:;
 <a href="javascript:;">点击2</a>
//备注：
//	给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码

自定义属性操作

自定义属性一般用于在页面中存储数据，而不需要在数据库中存储

获取属性值

Element.属性（内置属性通点的方式获取元素属性）
Element.getAttribute(“属性”) （一般用于自定义属性）兼容性获取

    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
  // 1. 获取元素的属性值
        // (1) element.属性
       console.log(div.id);
  //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
	</script>

设置属性值

Element.属性= “值” （内置属性）
Element.setAttribute( “属性”，”值“ )； //一般用于自定义属性

// 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
   // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是

移除属性值

Element.removeAttribute(“属性”)

// class 不是className
// 3 移除属性 removeAttribute(属性)    
div.removeAttribute('index');

获取和设置H5自定义属性

只能获取以 data开头的自定义属性
Element.dataset.index 或者 Element.dataset[“index”] ie11才支持

使用 Element.dataset.属性获得的是一个以 data- 开头的自定义属性集合

H5中规定自定义属性要以 data-开头做为属性名并且赋值。

在标签中设置
使用 js设置 Element.setAttribute(“data-index”,2)

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
        var div = document.querySelector('div');
        // console.log(div.getTime);
        console.log(div.getAttribute('getTime'));
        div.setAttribute('data-time', 20);
        console.log(div.getAttribute('data-index'));
        console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
</script>

节点操作

node 表示父级child 表示自己

创建节点

document.createElement(“标签”)
- 动态创建元素创建之后需要添加

添加节点

node.appendchild(child ) //node表示父级 child表示子级
- 将节点添加到node表示的父节点的子节点列表的末尾，类似数组的方法push
node.insertBefore( child,指定节点的位置 )
- 将节点添加到node表示的父节点的指定子节点的~前面，类似于css里面的before伪元素

<body>   
    <ul>
        <li>123</li>
    </ul>
    <script>
     // 1. 创建节点元素节点
        var li = document.createElement('li');
     // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素
        var ul = document.querySelector('ul');
        ul.appendChild(li);
     // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>
</body>

删除节点

node.removeChild( child ) 方法在父级节点删除一个子节点，返回删除的节点

<body>  
   <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 删除元素  node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 点击按钮依次删除里面的孩子
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>

复制（克隆）节点

node.cloneNode() //返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点

<body>  
    <ul> 
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
     // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
    // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>