javascript获取元素和节点操作

最新推荐文章于 2022-06-21 05:16:11 发布

hxyfdsal

最新推荐文章于 2022-06-21 05:16:11 发布

阅读量235

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/fdsal/article/details/111288190

版权

获取元素

1.根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象或null

案例：

<body>
	<div id="time">2019-9-9</div>
	<script>
		// 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
		var timer = document.getElementById('time');
		console.log(timer);
		console.log(typeoftimer);
		// console.dir 打印我们返回的元素对象更好的查看里面的属性和方法
		console.dir(timer);
	</script>
</body>

2.根据标签名获取元素

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象)

案例代码：

<body>
	<ul>
		<li>知否知否，应是等你好久11</li>
		<li>知否知否，应是等你好久22</li>
		<li>知否知否，应是等你好久33</li>
		<li>知否知否，应是等你好久44</li>
		<li>知否知否，应是等你好久55</li>
	</ul>
	<ul id="nav">
		<li>生僻字</li>
		<li>生僻字</li>
		<li>生僻字</li>
		<li>生僻字</li>
		<li>生僻字</li>
	</ul>
	<script>
		// 1.返回的是获取过来元素对象的集合以伪数组的形式存储的
		var lis = document.getElementsByTagName('li');
		console.log(lis);
		console.log(lis[0]);
		// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
		for (var i=0; i<lis.length; i++) {
		console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

3.H5新增获取元素方式

document.getElementsByClassName('类名'); //根据类名返回元素对象集合

document.querySelector('选择器'); //根据指定选择器返回第一个元素对象

document.querySelectorAll('选择器');   //根据指定选择器返回

注意：querySelector和querySelectorAll里面需要加符号

4.获取特殊元素（body，html）

获取body元素

document.body  //返回body元素对象

获取html元素

document.documentElement //返回html元素对象

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

改变元素内容（获取或设置）

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
innerText改变元素内容

<body>
	<button>显示当前系统时间</button>
	<div>某个时间</div>
	<p>1123</p>
	<script>
	// 当我们点击了按钮，  div里面的文字会发生变化
	// 1. 获取元素
	var btn = document.querySelector('button');
	var div = document.querySelector('div');
	// 2.注册事件
	btn.onclick=function() {
		// div.innerText = '2019-6-6';
		div.innerHTML=getDate();
    }
     function getDate() {
        var date=new Date();
        // 我们写一个 2020年 10月 1日星期四
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var dates = date.getDate();
        var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var day = date.getDay();
        return '今天是：'+year+'年'+month+'月'+dates+'日 '+arr[day]; 
          }
      </script>
</body>

innerText和innerHTML的区别
获取内容时的区别：
innerText会去除空格和换行，而innerHTML会保留空格和换行
设置内容时的区别：
innerText不会识别html，而innerHTML会识别

常用元素的属性操作

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

获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值

表单元素的属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

获取属性的值
元素对象.属性名
设置属性的值
元素对象.属性名 = 值
表单元素中有一些属性如：disabled、checked、selected，元素对象的这些属性的值是布尔型。

样式属性操作

常用方式

element.style    行内样式操作
element.className      类名样式操作

方式1：通过操作style属性
元素对象的style属性也是一个对象！
元素对象.style.样式属性 = 值;
方式2：通过操作className属性
元素对象.className = 值;
因为class是关键字，所有使用className

自定义属性操作

获取属性值

element.属性获取属性值
element.getAttribute(‘属性’);
区别：
element.属性获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性（标准）程序员自定义的属性

设置属性值

element.属性=‘值’ 设置内置属性值
element.setAttribute(‘属性’,‘值’);
区别：
element.属性设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性

移出属性

element.removeAttribute(‘属性’);

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

H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：

1.设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。
比如<div data-index="1"></div>
或者使用JS设置
element.setAttribute('data-index',2)

2.获取H5自定义属性

1.兼容性获取 element.getAttribute('data-index');
2.H5新增element.dataset.index 或者element.dataset['index']ie11才开始支持
案例如下：

<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.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

子节点

所有子节点

1.parentNode.childNodes(标准)

parentNode.childNodes返回包含指定节点的子节点的集合，改集合为即时更新的集合。
返回值里面包含了所有的子节点，包括元素节点，文本节点等。
子元素节点

parentNode.children(非标准)

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
第一个子节点

parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
最后一个子节点

parentNode.lastChild

lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
第一个子元素节点

parentNode.firstElementChild

firstElementChild返回第一个子元素节点，找不到则返回null。
最后一个子元素节点

parentNode.lastElementChild

lastElementChild返回最后一个子元素节点，找不到则返回null。

兄弟节点

下一个兄弟节点

node.nextSibling

nextSibling返回当前元素的下一个兄弟节点，找不到返回null。
上一个兄弟节点

node.previousSibling

previousSibling返回当前元素上一个兄弟节点，找不到则返回null。
下一个兄弟元素节点（有兼容性问题）

node.nextElementSibling

nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null。
上一个兄弟元素节点（有兼容性问题）

node.previousElementSibling

previousElementSibling返回当前元素上一个兄弟节点，找不到则返回null。

创建节点

document.createElement('tagName')

document.createElement()方法创建有tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

hxyfdsal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript获取元素和节点操作

获取元素1.根据ID获取语法：document.getElementById(id)作用：根据ID获取元素对象参数：id值，区分大小写的字符串返回值：元素对象或null案例：<body> <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面 var timer = document.getElementById('time'
复制链接

扫一扫