js基础dom

最新推荐文章于 2024-08-30 11:13:00 发布

置顶 werch

最新推荐文章于 2024-08-30 11:13:00 发布

阅读量142

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42666092/article/details/115450783

版权

js 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了DOM中的各种节点类型，如元素节点、属性节点、文本节点等，以及如何获取和操作这些节点。内容涵盖获取元素属性、设置和删除属性、获取元素内容、样式、子节点、父节点、兄弟节点的方法。此外，还讨论了DOM尺寸、存储机制（localStorage和sessionStorage）以及音频控制。文章深入讲解了JavaScript在网页交互中的重要作用。

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

1.节点

	nodeName	nodeType	NodeValue
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容
注释节点	#comment	8	-
文档节点	#document	9	-
文档声明节点	html	10	-

2.获取元素节点属性

获取属性 attributes

a.ele.attributes[i].nodevalue,...,;
b. getAttribute(属性名) 来获取属性值
 
注意，获取class的时候
1.在标准浏览器和 IE8及其以上，获取的是元素的类名
2.IE8以下必须使用className

 //console.log(wp.attributes['id'].nodeName);
 //console.log(wp.attributes['id'].nodeValue,
 wp.attributes['class'].nodeValue);
 //console.log(wp.attributes['id'].nodeValue,
 wp.attributes['class'].nodeValue);
 //console.log(wp.childNodes);

设置属性 setAttributes

setAttribute('属性名','属性值 属性值 属性值')来设置属性的值，
如果属性名存在，则是修改属性的值，如果属性名不存在，则是添加新的
属性
如果要添加多个属性值，用空格隔开

删除属性 removeAttributes(‘属性名’)

ele.removeAttribute('属性名');

通过.和[]方式给元素添加属性

1.和[]方式只能获取 .和[] 设置的属性，不能获取写在行间的自定义
 属性，可以获取标签自带的行间属性
2. 获取class的时候，需要使用 className来获取，因为class是一个
 关键字，所以使用className wp替代，例如 wp.className，
 wp['className']
3. 通过 .和[]方式 设置的值，只能通过.和[]方式来获取，不能通过
 getAttribute(属性名) 获取。

3.获取元素标签

动态获取
a.document.getElementById()
b.getElementsByTagName()
c.getElementsByClassName() 新方法，IE低版本不支持
d.getElementsByName() 通过name获取元素(input,a)，都支持

静态获取
querySelector(选择器) 新方法，ie低版本不支持，选择满足条件的第一个元素
querySelectorAll(选择器) 新方法，ie低版本不支持，选择满足条件的所有元素

var li = document.querySelector('#list>li:nth-child(2)');

4. 获取元素节点内容

a.ele.innerHTML
	获取元素当中的所有内容，获取的是一个字符串，包括html结构，
	还可以把制表符，空格一并获取，当元素设置隐藏的时候，依然可以
	获取


- innerHTML会引起底层从新刷新，刷新的同时会引起内部所有元素的刷新，也就是说，刷新之后的元素，不是
原来的那个元素，点击事件加载在原来的那个元素上，所以点击不会生效

innerHTML每次刷新会很耗时

b.innerText
	获取元素当中的所有文本内容，获取的是一个字符串，不包括html
	结构，还可以把制表符，空格一并获取，当元素设置隐藏的时候，
	依然可以获取
c.textContent(IE8以上支持)
	获取元素当中的所有文本内容，获取的是一个字符串，不包括html
	结构，还可以把制表符，空格一并获取，当元素设置隐藏的时候，
	依然可以获取

5.获取元素样式

a. 在标准浏览器下，通过 getComputedStyle(obj，null) 来获取元素的css属性。该方法的第二个参数默认为null，特可以传入伪类或者伪元素选择器，如果传入的伪类或者伪元素选择器，则获取的css属性是伪类或者伪元素选择器的属性：getComputedStyle(obj,null).属性名
b. 在ie中，需要通过 ele.currentStyle[‘属性名’] 来获取css中的属性

 //兼容写法，获取元素的属性
   function getCssAttr(obj,attr){
	   return obj.currentStyle?obj.currentStyle[attr]:
	   getComputedStyle(obj)[attr];
   }

6.获取元素的子节点

 a.childNodes 和 children
 b.firstChild 和 firstElementChild
  firstChild 获取元素的第一个子节点，等价于 childNodes[0]
  firstElementChild 获取元素的第一个子元素，等价于 children[0],ie6 7 8 不支持
 c. lastChild 和 lastElementChild
   lastChild 获取元素的最后一个子节点
   lastElementChild 获取元素的最后一个子元素，ie6 7 8 不支持

7.获取元素的父节点

  parentNode 和 parentElement 获取父元素
  效果一样，但是parentNode的兼容性更好

8.获取元素兄弟节点

a.(父元素).nextSibling 和 (父元素).nextElementSibling
  nextSibling 下一个兄弟节点,高版本浏览器会把换行符作为text节点
  nextElementSibling 下一个兄弟元素，ie6 7 8 不支持
b.previousSibling 和 previousElementSibling 
  previousSibling 上一个兄弟节点,高版本浏览器会把换行符作为text节点
  previousElementSibling 上一个兄弟元素，ie6 7 8 不支持

9.获取其他元素

获取body元素
document.body

获取html元素
document.documentElement

获取声明节点
document.doctype

获取img标签数组集合
document.images

10.节点操作

document.createElement(ele)
创建一个元素返回值是创建的新元素节点

b. 把元素节点添加到父级
 父级.appendChild(子元素);
 (把元素添加到父级的最后面)
 
c. 向父级插入一个元素
 语法： 父级元素.insertBefore(需要插入的元素，父元素中的子元素);、
  把 参数1 插入到 参数2 之前
  该函数的参数必须是两个
  如果第二个参数为null或者是undefined的时候，该函数等价于appendChild()
 
 d.删除子元素
父级元素.removeChild(要删除的元素)
参数的必须是一个元素节点
返回值是要删除的那个节点
删除节点之前，必须要先找到这个节点
可以通过自身删除该节点  ele.parentNode.removeChild(ele);

e.替换节点
父元素.replaceChild(替换的节点元素,被替换的节点元素);
返回值是 被替换的节点元素

f.克隆节点
var clon=被克隆的元素.cloneNode()
如果参数为
true：深层拷贝，会把该节点中的子级，以及子级中的内容都复制出来
false：不复制子级节点中的任何内容(默认)

该方法只会复制节点本身，不会复制节点上绑定的事件
返回值是拷贝出来的对象

11.dom尺寸

a. 内尺寸
clientWidth，clientHeight，clientLeft，clientTop
clientWidth(元素宽度) = 左右padding + width(不包括滚动条15px)
clientHeight(元素高度) = 上下padding + height(不包括滚动条15px)
clientLeft 元素左边框的大小
clientTop 元素上边框的大小
以上属性均输出数字

b.外尺寸
offsetParent
offsetWidth offsetHeight offsetLeft offsetTop 
offsetWidth = 左右padding + width(包括滚动条15px)+左右boder的宽
offsetHeight = 上下padding+height(包括滚动条15px)+上下boder的宽
offsetParent 元素的定位父级，也就是具有定位属性的父级。如果元素的所有父级都不是定位父级，
在标准浏览器下，offsetParent是body，在ie下是html，因此需要保证html和body统一。html和body
的offsetParent是null

offsetLeft 当前元素的左外边框，到它的offsetParent的左内边框的距离
offsetTop 当前元素的上外边框，到它的offsetParent的上内边框的距离

c.滚动尺寸
scrollWidth scrollHeight scrollTop scrollLeft
scrollWidth 当子元素的盒模型的宽度大于当前元素盒模型的宽的时候，scrollWidth = 子元素的盒模型总宽度
小于 + 当前元素的左padding；如果子元素的盒模型总宽度小于当前元素的宽度，那么 scrollWidth = 当前元素
的width + 当前元素的左右padding
scrollHeight 它与上面的类似
scrollTop 元素内部卷上去的高度
scrollLeft 元素内部卷到左侧的距离
scrollTop 和 scrollLeft 支持赋值

获取浏览器的可视高度（html）
1. window.innerHeight ie8及其以下不兼容
2. document.documentElement.clientHeight ie和标准浏览器都支持

12.localstorage,sessionstorage

localstorage 
	1.他可以使数据持久化
	2.ie8以上以及标准浏览器支持，在移动端可以随意使用
	3.存储量很大，约为5M，而cookie只有4kb
	4.存储路径是当前网页的域名

sessionStorage
	1.也是一种数据持久化的方式，保存在sessionStorage中，当页面关闭的时候，数据就会被清空
	2.使用方式和localStorage一模一样
	

	key和value 都是以字符串的形式进行存储的。虽然标准中说明可以存储任何数据类型，但是目前浏览器
	只能以string类型进行存储
	
	在设置的时候，如果key存在，就是更改key对应的value值
	如果key不存在，就是添加一个key value 键值对

sessionStorage.setItem(key,value)
	参数key 可以是变量名，也可以是字符串，数字
	参数value 可以是变量名，也可以是字符串，数字
    
	localStorage.getItem(key) 获取属性名为key的值
	localStorage.removeItem(key) 获取属性名为key的键值对
	localStorage.clear() 清空所有数据


 localStorage.key(2) 参数是下标，获取数据中下标对应的key值

13音频

.play() 开始播放音频。
.pause() 暂停当前播放的音频。

14.移动端js动画

requestAnimationFrame（）执行动画
cancelAnimationFrame( )取消动画

    requestAnimationFrame(执行的回调函数)
	1.时间间隔不用写，根据浏览器的刷新频率触发函数
	2.当浏览器窗口处于闲置状态的时候，会自动暂停该动画，节省了浏览器的开销，优化内存，
	当该窗口重新激活的时候，动画会继续执行
	cancelAnimationFrame(req);（关闭动画）
ex:
	var wp = document.querySelector('.wp');
	var left = 0;
	var req = null;
	function move() {
		left++;
		wp.style.left = left + 'px';
		if (left < 1000) {
			req = requestAnimationFrame(move);
		}
	}
	req = requestAnimationFrame(move);
	var btn = document.getElementById("btn");
	btn.onclick = function () {
		// 暂停动画
		cancelAnimationFrame(req);
	};