你知道DOM属性的基本操作是什么吗？

大饼不好吃

已于 2023-07-07 08:36:13 修改

阅读量69

点赞数

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

于 2023-04-25 22:06:50 首次发布

本文链接：https://blog.csdn.net/m0_64892344/article/details/130374368

版权

JaveScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言

二、非内置属性（自定义属性）

1.setAttribute(name,value)

2.getAttribute(name)

2.removeAttribute(name)

前言

什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等。

元素的属性是什么，分为两种，一种叫内置属性，一种叫非内置属性。

一、内置属性怎么操作（通过JS）？

以上这些属性既可以获取，也可以设置！

示例：获取下列表单的节点的各种值,并且进行修改

<div id="box" class="first" feng="admin">123</div>
<a href="lunaxiede" title="这是a" target="_blank">zheshia</a>
<img src="asd/asd/asdasdsa.jpg" alt="这是img的alt" title="这是图片"/>
<input type="text" name="user" id="user" value="" />

JS获取节点的写法：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Document</title>

</head>

<body>

<div id="box" class="first" feng="admin">123</div>

<a href="lunaxiede" title="这是a" target="_blank">zheshia</a>

<img src="asd/asd/asdasdsa.jpg" alt="这是img的alt" title="这是图片" />

<input type="text" name="user" id="user" value="没有断奶的孩子" />

<script>

// 内置属性:就是标签自带的属性如input的 type name class id

// img的内置属性 src alt class id width height

// 非内置属性(自定义属性): 人为在标签上设置的属性

// div上属性的获取

// var divObj = document.getElementById('box');

// // id的获取

// console.log(divObj.id)

// // class的获取 className

// console.log(divObj.className);

// // 自定义属性的获取不能直接使用.

// console.log(divObj.feng);

// //console.log(divObj)

// // div上属性的设置

// // id的设置

// divObj.id = 'latiao';

// // class的设置

// divObj.className = 'kissshao';

// a标签属性的操作

// var aObj = document.getElementsByTagName('a')[0];

// // console.log(aObj)

// // 获取title

// console.log(aObj.title);

// // href属性获取

// console.log(aObj.href);

// // target的获取

// console.log(aObj.target);

// // 设置a标签的href和title值

// aObj.title = '哈哈,我是a';

// aObj.href = 'http://www.baidu.com';

// 图片的属性获取设置

// var imgObj = document.querySelector('img');

// //console.log(imgObj)

// // src的获取和设置

// console.log(imgObj.src);

// imgObj.src = '../images/8.jpg';

// input框属性的获取和设置

var inputObj = document.getElementById("user"); //console.log(inputObj); // type和name属性的获取 //console.log( inputObj.type); //console.log( inputObj.name); //value的获取和设置

console.log(inputObj.value);

inputObj.value = "长的白白胖胖";

</script>

</body>

</html>

二、非内置属性（自定义属性）

1.setAttribute(name,value)

描述：给指定对象设置属性名和属性值

参数：name指属性名，value指属性值

代码如下（示例）：

obox.setAttribute("a","110")

obox.setAttribute("feng","root")

2.getAttribute(name)

描述：获取指定对象的属性名的属性值

返回：属性值

代码如下（示例）：

console.log(obox.feng) // 获取不到值
console.log(obox.getAttribute("feng"))

2.removeAttribute(name)

描述：移除指定对象的属性

obox.removeAttribute("a")

代码如下（示例）：移除p中自定义的属性

<p goodsId='25'>因噎废食 </p>

三、自定义数据属性

H5中规定的非标准属性指定方式,但是必须用data-前缀告诉浏览器,data-后面跟什么都行。

<div id="app" data-myname='jack' data-appId="12345">
访问方式
div.dataset.myname

名称如 data-my-name,data-My-Name同过myName来访问.data-myname,data-myName通过+访问。

四、节点的公共属性

父节点.firstChild：返回第一个子节点,包含空白节点(文本节点)
.firstElementChild:返回第一个子节点
父节点.lastChild：返回最后一个子节点(包含空白)
lastElementChild 返回最后一个子节点(不包含空白)
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）

nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）(IE7/8不支持）

previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点),只读属性；(IE7/8不支持）
childNodes：返回子节点列表(包括,文本节点,注释节点)，返回时一个组数
children: 只返回标签元素节点

节点：

parentNode：返回父节点

nodeName：返回节点名字