DOM元素属性、节点操作

最新推荐文章于 2022-05-04 00:08:23 发布

Darlingmi

最新推荐文章于 2022-05-04 00:08:23 发布

阅读量322

点赞数 4

分类专栏： JavaScript 文章标签： js html5 javascript

本文链接：https://blog.csdn.net/Darlingmi/article/details/117745737

版权

JavaScript 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

一、通过DOM操作元素的属性

1、操作style属性

书写规则：元素对象.style.样式属性名

例如：

          body.style.backgroundColor
		  background-color  --> backgroundColor
		  font-size --> fontSize

2、操作className属性

通过该属性可以改变元素的class属性值

书写规则：元素对象.className

例：

<div class=''>用户名：</div>
<input type='text' id='test'>
<span id='a'> </span><br><br>
<button id='bu'>验证</button>
<script>
    //var test=document.querySelector('#username');
    bu.onclick=function(){
        //var b=document.querySelector('s'); 
        if(test.value=='abc'){
            a.style.color='red';
            a.innerHTML='用户名不可用';
        }else{
            a.style.color='green';
            a.innerHTML='用户名可用';
        }
    }
</script>

二、获取属性值

1、获取元素的内置属性值

element.属性或 getAttribute(‘属性’)

2、获取元素的自定义属性值

getAttribute(‘属性’) ，例：

   <p id="p1" class="自定义属性" title="">西安邮电大学</p>

三、设置属性值

1、设置内置属性的值

element.属性 = 值

2、设置自定义属性的值

setAttribute('属性','值')

四、移除属性：

removeAttribute('属性')

五、HTML5中自定义属性的实现

通过 ‘data-属性名’ 方式自定义属性

  <div data-index='2'></div> -->H5的写法,'data-'是自定义属性的前缀，便于区分自定义属性和内置属性
  
  <div id="dt" index='2'></div>  -->H5以前版本的写法

1、在H5设置自定义属性的值的方式

 元素对象名.dataset.属性名 = 值

2、H5中获取自定义属性的值

(1)对象名.dataset.属性

(2)对象名.dataset[‘属性’]

(3)getAttribute(‘属性’)

六、节点

一个页面就是一个节点树，页面中的内容就是节点。

1、节点的基本属性

(1)节点类型(nodeType)

A、1表示为元素节点(即标签)

B、2表示为属性节点(标签的属性)

C、3表示为文本节点(标签的内容)

(2)节点名称(nodeName)

(3)节点值(nodeValue)

2、创建新节点

(1)通过createElement创建元素节点(创建标签)；通过createTextNode创建文本节点.

(2)通过appendChild方法将新创建的节点添加到当前节点的末尾.

3、插入节点

inserBefore(new,ref),将new节点插入到ref节点之前.
例：

<body>
    <h3 id='h'>西安邮电大学</h3>
    <form name='frm'>
        输入文本：<input type='text' name='txt'>
        <input type='button' value='插入节点' onclick="inserNode('h',document.frm.txt.value)">
    </form>
    <script>
         var btn =document.querySelector('button')
        btn.onclick=inserNode()
        function inserNode(nodeid,str){
            var str=document.querySelector('input').value
            var newNode=document.createElement('p')
            var newTxt=document.createTextNode(str)
            newNode.appendChild(newTxt)
    
            var ref=document.querySelector('#'+nodeid)
    
            if(ref.parentNode){
                ref.parentNode.insertBefore(newNode,ref)
            }
        }
    
    </script>
    </body>

在这里插入图片描述
输入文字点击插入节点会插入该节点：

4、复制节点cloneNode(deep)

deep是逻辑值，true表示深拷贝,即复制当前节点及其所有子节点(默认值).

false表示浅拷贝，只复制当前节点不复制其子节点.

Darlingmi

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM元素属性、节点操作

一、通过DOM操作元素的属性1、操作style属性书写规则：元素对象.style.样式属性名例如： body.style.backgroundColor background-color --> backgroundColor font-size --> fontSize2、操作className属性通过该属性可以改变元素的class属性值书写规则：元素对象.className例：<div class=''>用户名：
复制链接

扫一扫