JavaScript的Node属性

河北西兰花

已于 2024-01-07 08:56:58 修改

阅读量1.1k

点赞数 25

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

于 2024-01-04 14:18:16 首次发布

本文链接：https://blog.csdn.net/m0_73278382/article/details/135369565

版权

本文详细介绍了DOM节点的基本属性，如parentNode、节点类型、节点名称、innerHTML和textContent的区别，以及元素的属性操作（hasAttribute,getAttribute,setAttribute等），同时涵盖了CSS样式（style）和自定义数据存储（dataset）的使用方法。

摘要由CSDN通过智能技术生成

1.节点Node常见的属性

1.获取节点

parentNode父节点

previousSibling前兄弟节点

nextSibling后兄弟节点

children所有节点，包括元素文本和注释

childNodes子元素节点

firstChild第一个子节点

lastChild最后一个子节点

var bodyChildNodes = document.body.childNodes

var commentNode = bodyChildNodes[0];

var textNode = bodyChildNodes[1];

var divNode = bodyChildNodes[2];

2.节点属性

1.nodetype

注释节点类型为8

文本节点类型为3

元素节点类型为1

Node.ELEMENT_NODE	1	一个元素节点例如<p>,<div>
Node.TEXT_NODE	3	Element或者Attr中的文字
Node.COMMENT_NODE	8	一个Comment节点
Node.DOCUMENT_NODE	9	一个Document节点
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的DocumentType节点例如<!DOCTYPEhtml>

2.nodeName(节点名称),tagName(元素名称)

1.nodename

8----#comment

3----#text

1----元素标签名(DIV,P........)

2.tagName

针对元素,获取元素标签名称。

3.data/innerHTML/textContent

1.data针对非元素的节点获取数据

2.innerHTML将标签内容都获取

例如:<h2>我是标题</h2>

<p>dawdw</p>

1.div.innerHTML ="dawd";

将div内部所有替换为dawd

2.div.innerHTML ="<h2>dawd</h2>";

添加h2标签并将dawd添加到标签中

3.textContent只获取文本

1.div.textContend = "<div>dwada</div>"

所有内容都只会被转化为文本不会转化为元素

4.outerHTML

div.outertHTML

获取本身和内部元素和内容

2.节点的其他属性

1.hidden属性（全局属性，默认false）

3.元素的属性和特性

1.元素中的属性attribute

1.1attribute分类

1.标准属性

<div id="abc" class="box" titile="sss"></div>

其中id,class,title为标准属性

2.非标准属性

<div abc="id" box="class" sss="title"></div>

其中abc,box,sss为非标准属性

1.2attribute操作

对所有的attribute访问都支持这些方法

var elem =doucument.querySelector();

1.elem.hasAttribute(name)检查特性是否存在

2.elem.getAttribute(name)获取这个特性值

3.elem.setAttribute(name)设置这个特性值

4.elem.removeAttribute(name)移除这个特性

5.attributes:attr对象的集合，具有name，value属性

elem.setAttribute用法

1.elem.setAttribute("id","cba")将属性id更改为cba（<div id="cba">)

attributes:的用法

var boxes = elem.attributes

for(var i of boes)

{

console.log(i.name,i.value)
}

attribute操作缺点特征：
1.对大小写不敏感

2.它们的值总是字符串类型

2.对象中的属性property

由此可见property只能拿到标准属性

而非标准属性只能通过 attribute

property优点

1.可以获取到属性值和类型

4.元素Element-class的用法

1.className

 var elem = document.querySelector(".box");
    elem.className="abc"

用className赋值时会覆盖之前的class

2.classList

1.elem.classList.add(class):添加一个类

2.elem.classList.remove(class):添加/移除类

3.elem.classList.toggle(class)如果不存在就添加类，存在则移除这个类

4.elem.classList.contains(class)检查给定类，返回ture/false

添加class

    // 方法一
    var elem = document.querySelector(".box");
    elem.className="abc";
    // 方法二
    elem.classList.add("abc");
    elem.classList.add("active");

5.Element-style的用法

<div class="box" style="background-color: aqua;"></div>
console.log(elem.style.backgroundColor);

1.如果想获取style样式值需要将将属性写为小驼峰模式

2.如果一个属性值为空，则使用默认值

1.读取非内联style

<style>
    .box{
        font-size: 20px;
    }
</style>
<body>
    <div class="box" style="background-color: aqua;"></div>
</body>
<script>
    var elem = document.querySelector(".box");
    console.log(elem.style.backgroundColor);
    console.log(elem.style.fontSize);
</script>
</html>

使用property方式读取不到style值

需要使用全局方法

console.log(getComputedStyle(elem).fontSize)

6.Dateset使用方法

<body>
    <div class="box" data-age="18" data-height="180"></div>
</body>
<script>
    var elem = document.querySelector(".box");
   console.log(elem.dataset)
</script>
</html>

读取自定义属性

河北西兰花

关注

25
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
JavaScript的Node属性

1.elem.setAttribute("id","cba")将属性id更改为cba（)4.elem.classList.contains(class)检查给定类，返回ture/false。3.elem.classList.toggle(class)如果不存在就添加类，存在则移除这个类。2.elem.classList.remove(class):添加/移除类。1.elem.classList.add(class):添加一个类。其中id,class,title为标准属性。
复制链接

扫一扫