排他思想和节点操作基础

最新推荐文章于 2025-08-04 20:59:31 发布

原创最新推荐文章于 2025-08-04 20:59:31 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

基础专栏收录该内容

6 篇文章

订阅专栏

文章目录

排他思想
- 自定义属性的操作
节点操作
- 1.节点层级
- - 1.父节点
  - 2.子节点

排他思想

利用循环获取所有所需元素，创造一个伪数组。

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
var btns = doucument.getElementsByTagName('button');
for (var i = 0; i< btns.length; i++){
	btns[i].onclick = function(){
		this.style.backgroundColor = 'pink';
	}
}
</script>
</body>

但点击后按钮的颜色并不会再次变回来，所以需要每次点击时把所有的样式清楚一次，再对点击的那个按钮进行样式修改。

<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
var btns = doucument.getElementsByTagName('button');
for (var i = 0; i< btns.length; i++){
	btns[i].onclick = function(){
		for(var i = 0; i = btns.length; i++){
			btn[i].style.back
		}
		this.style.backgroundColor = 'pink';
	}
}
</script>
</body>

自定义属性的操作

1.获取属性值

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

2.设置属性值

element.属性=‘值’ 设置内置属性值。
element.setAttribute(‘属性’,‘值’); 主要设置自定义的属性（标准）

3.移除属性值

element.removeAttribute(‘属性’);

4.技巧

排他思想也可以用于隐藏盒子，来改变页面的内容或结构。在很多页面有所应用。

5.H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
1.H5规定自定义属性data-开头做为属性名并且赋值。
例

或者 element.setAttribute(‘data-index’,2)
2.兼容性获取 element.getAttribute( ‘data-index’ );
H5新增 element.dataset.index 或者 element.dataset[ ‘index’ ] ie 11开始支持
3.如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法。

节点操作

因为元素操作有时过于繁琐且逻辑性不强，所有有时用节点层级关系获取元素，节点操作可以利用父子节点关系获取元素，虽然逻辑性强但兼容性稍差。
页面中所有的内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用node来表示。
HTML DOM中都所有节点均可通过javascript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
在这里插入图片描述
节点至少拥有nodeType（节点类型）、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
元素节点 nodeType 为1
属性节点 nodeType 为2
文本节点 nodeType 为3 （文本节点包含文字、空格、换行等）
节点操作主要操作的是元素节点

1.节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子层级关系。

1.父节点

node.parentNode
可以得到元素的父级节点，但是离元素最近的父级节点，
如果找不到父节点就返回null。

2.子节点

parentNode.childNodes(标准)
parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。这个集合包含节点元素节点文本节点等等。如果只想获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes。
parentNode.children(非标准)
可以获得子元素节点，其余节点不返回。
parentNode.fristChild
返回第一个子节点，没有则返回null。但包含所有节点。
（parentNode.lastChild与之同理）
parentNode.fristElementChild
可以获取第一个子元素节点。（parentNode.lastElementChild与之同理，但这两个方法有兼容性问题，IE9以上才支持。）
因为parentNode.fristElementChild有兼容性问题，所以一般并不使用，多数使用parent.children[0]来获取第一个子元素节点，parent.children[属性.children。length - 1]来获取最后一个元素。