前端基础知识--Element的常用属性及函数

先知demons

已于 2023-02-03 11:29:01 修改

阅读量2.5k

点赞数 2

文章标签： javascript 前端 html

于 2022-09-08 00:51:55 首次发布

本文链接：https://blog.csdn.net/wzy_PROTEIN/article/details/126753857

版权

概述

Element对象用于表示一个HTML标签元素，元素节点。

常用属性

操作元素内容
- 表单元素
  - 赋值
    - element.value='值'
  - 取值
    - var 变量名称=element.value

var accElement=document.querySelector('[name="acc"]');
//获取表单值
var val=accElement.value;

普通元素

HTML内容

赋值(如果值中包含HTML元素，该元素会被作为HTML解析执行)

element.innerHTML='值'

var divElement=document.querySelector('div');
//赋值
divElement.innerHTML='<a href="">内容</a>';

取值(文本和HTML内容都会获取)

var 变量名称=element.innerHTML

var divElement=document.querySelector('div');
var divContent=divElement.innerHTML;
console.log(divContent);

Text内容

赋值(如果值中包含HTML元素，会被作为文本字符串添加)
- element.innerText='值'
- ```
var divElement=document.querySelector('div');
divElement.innerText='<a href="">内容</a>';
```

取值(只取文本内容，HTML内容会被忽略)

var 变量名称=element.innerText

var divElement=document.querySelector('div');
var divContent=divElement.innerText;
console.log(divContent);

操作元素属性

普通属性

赋值

element.属性名称='值'

var imgElement=document.querySelector('img');
//属性赋值
imgElement.src='./img/woniubanner-2.png';

取值

var 变量名称=element.属性名称

var imgElement=document.querySelector('img');
var srcAttr=imgElement.src;
console.log(srcAttr);

特殊属性

class属性

赋值

element.className='值'

var classElement=document.querySelector('img');
classElement.className='two';

取值

var 变量名称=element.className

var classElement=document.querySelector('img');
console.log(classElement.className);

操作元素样式

方式一

事先准备好CSS样式，通过控制元素的id、class属性值的方式控制样式。

<style>
.demo{
color: red;
font-size: 64px;
}
#test{
color: pink;
font-size: 32px;
}
</style>
<body>
<span>span</span>
</body>

//获取目标元素的Element对象
var spanElement=document.querySelector('span');
//设置元素的class属性值
spanElement.className='demo';
//设置元素的id属性值
spanElement.id='test';

方式二

通过操作元素的style属性实现样式控制。

语法

element.style='css样式'

var spanElement=document.querySelector('span');
//操作style
spanElement.style='color: red;font-size: 64px;';

element.style.css属性名称='css属性值'

var spanElement=document.querySelector('span');
spanElement.style.color='red';
spanElement.style.fontSize='64px';

操作元素节点

子节点

firstElementChild

获取当前节点的第一个子节点。

//获取目标Element对象
var myDivElement=document.querySelector('#myDiv');
//获取第一个子元素
var feChild=myDivElement.firstElementChild;

lastElementChild

获取当前节点的最后一个子节点。

//获取目标Element对象
var myDivElement=document.querySelector('#myDiv');
//获取最后一个子元素
var leChild=myDivElement.lastElementChild;

children

获取当前节点的所有子节点。

//获取目标Element对象
var myDivElement=document.querySelector('#myDiv');
//获取当前节点的所有子节点
var eleArray=myDivElement.children;

兄弟节点

previousElementSibling

获取当前节点的前一个元素节点。

//获取目标Element对象
var myDivElement=document.querySelector('#myDiv');
//获取前一个节点
var preEle=myDivElement.previousElementSibling;

nextElementSibling

获取当前节点的后一个元素节点。

//获取目标Element对象
var myDivElement=document.querySelector('#myDiv');
//获取后一个节点
var nextEle=myDivElement.nextElementSibling;

父节点

parentElement

获取当前节点的父元素节点。

//获取目标Element对象
var myDivElement=document.querySelector('#myDiv');
//获取父节点
var parentEle=myDivElement.parentElement;

操作盒模型

offsetWidth

获取当前盒子的宽(内容+内边距+边框)。

//获取inner的Element对象
var innerElement=document.querySelector('.inner');
//获取盒子的宽
console.log(innerElement.offsetWidth);

offsetHeight

获取当前盒子的高(内容+内边距+边框)。

//获取inner的Element对象
var innerElement=document.querySelector('.inner');
//获取盒子的高
console.log(innerElement.offsetHeight);

offsetLeft

获取当前盒子距离父盒子(非默认static定位)的左外边距。

//获取inner的Element对象
var innerElement=document.querySelector('.inner');
console.log(innerElement.offsetLeft);

offsetTop

获取当前盒子距离父盒子(非默认static定位)的上外边距。

//获取inner的Element对象
var innerElement=document.querySelector('.inner');
console.log(innerElement.offsetTop);

clientWidth

获取当前盒子的宽(内容+内边距)。

//获取inner的Element对象
var innerElement=document.querySelector('.inner');
console.log(innerElement.clientWidth);

clientHeight

获取当前盒子的高(内容+内边距)。

//获取inner的Element对象
var innerElement=document.querySelector('.inner');
console.log(innerElement.clientHeight);

常用函数

操作元素属性
- element.setAttribute('属性名称','值')
  - 设置指定属性值。
  - 参数
    - 目标属性名称。
    - 要设置的属性值。
  - 返回值
    - 无
    - ```
    //获取目标Element对象
    var aEle=document.querySelector('a');
    //设置属性
    // aEle.href='https://www.baidu.com';
    aEle.setAttribute('href','https://www.baidu.com');
```
- var 变量名称=element.getAttribute('属性名称')
  - 获取指定属性值。
  - 参数
    - 目标属性名称。
  - 返回值
    - 目标属性对应的属性值。
    - ```
    //获取目标Element对象
    var aEle=document.querySelector('a');
    //获取属性
    //var href=aEle.href;
    var href=aEle.getAttribute('href');
```
- element.removeAttribute('属性名称')
  - 移除指定属性。
  - 参数
    - 目标属性名称。
  - 返回值
    - 无
    - ```
    //获取目标Element对象
    var aEle=document.querySelector('a');
    //移除指定属性
    aEle.removeAttribute('href');
```
- var 变量名= element.hasAttribute('属性名称')
  - 判断有没有指定属性。
  - 参数
    - 目标属性名称
  - 返回值
    - 如果存在目标属性，则返回true，否则返回false。
    - ```
    //获取目标Element对象
    var aEle=document.querySelector('a');
    //判断有没有指定属性
    console.log(aEle.hasAttribute('href'));
```

操作元素节点

element.appendChild()

向当前元素节点添加指定元素节点，作为当前元素节点的最后一个子节点。
参数
- 要添加的目标Element对象。

返回值

新添加的元素节点对象。

//节点操作
var myDivEle=document.querySelector('#myDiv');
//创建目标节点对象
var aEle=document.createElement('a');
//添加属性
aEle.setAttribute('href','https://www.baidu.com');
//设置内容
aEle.innerText='点击一下';
//添加子节点
var re=myDivEle.appendChild(aEle);

element.insertBefore()

向当前元素节点中已有的子元素节点前添加子节点。
参数
- 要添加的目标Element对象。
- 参照的子元素节点Element对象。

返回值

新添加的元素节点对象。

//节点操作
var myDivEle=document.querySelector('#myDiv');
//创建目标节点对象
var aEle=document.createElement('a');
//添加属性
aEle.setAttribute('href','https://www.baidu.com');
//设置内容
aEle.innerText='点击一下';
//添加到指定节点前
var span2Ele=myDivEle.children[1];
myDivEle.insertBefore(aEle,span2Ele);

removeChild()

从当前元素中移除指定元素子节点。
参数
- 要删除的子元素Element对象。

返回值

被删除的元素Element对象。

//节点操作
var myDivEle=document.querySelector('#myDiv');
//获取要删除的元素Element
var span2Ele=myDivEle.children[1];
//删除子元素
var re=myDivEle.removeChild(span2Ele);

remove()

删除当前元素节点。
参数
- 无

返回值

//节点操作
var myDivEle=document.querySelector('#myDiv');
myDivEle.remove();

选中状态

单选和多选的选中状态
- 设置选中状态
  - 选中
    - element.checked=true
  - 未选中
    - element.checked=false
- 获取选中状态
  - var 变量名称=element.checked
    - 选中为true
    - 未选中为false
下拉列表的选中状态
- 设置选中状态
  - 选中
    - element.selected=true
  - 未选中
    - element.selected=false
- 获取选中状态
  - var 变量名称=element.selected
    - 选中为true
    - 未选中为false