12-26笔记

最新推荐文章于 2024-07-04 09:19:40 发布

kissceochao

最新推荐文章于 2024-07-04 09:19:40 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/kissceochao/article/details/78903913

版权

HTML 元素中包含标签名和若干个键值对，这个键值对我们称为“属性”（Attribute）
在 DOM 中，我们很少直接对属性进行操作，一般都是元素节点对象（Element对象）来操作属性。
1.Element.attributes属性
返回一个类似数组的动态对象

示例：遍历元素节点的所有属性
var d1Ele = document.getElementById("_d3").nextElementSibling;
if (d1Ele.hasAttributes()) {
var d1Att = d1Ele.attributes;
for (var i = 0; i < d1Att.length; i++) {
console.log(d1Att[i].name + ":" + d1Att[i].value);
}
} else {
console.log("No attributes To show!");
}
2. 元素节点对象的属性
HTML元素节点的标准属性，会自动成为元素节点对象的属性。

var _abaidu = document.getElementById("_abaidu");
console.log(_abaidu.href); // http://www.baidu.com
console.log(_abaidu.target); // _blank
console.log(_abaidu.test); // undefined
虽然在Html中大小写是不敏感的，但是在 Javascript 中，属性大小写敏感，而且属性一般都是采用小写。
有些HTML属性名是 Javascript 的保留字，转为 Javascript 属性时，需要改名字，主要由class-className,for-htmlFor
3.属性操作的标准方法
getAttribute()
setAttribute()
上述两个方法对所有的属性都适用（包含用户自定义的方法）
_abaidu.setAttribute("href","http://www.sina.com");
console.log(_abaidu.getAttribute("href"));

_abaidu.setAttribute("test","xxx");
console.log(_abaidu.getAttribute("test"));
hasAttribute()
removeAttribute()

4.dataset 属性
有时需要在 Html 上附加数据，供 Javascript 脚本使用。一种解决方法是自定义属性。
虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值，但是会使得HTML元素的属性不符合规范，导致网页的HTML代码通不过校验。
更好的解决方法是，使用标准提供的data-*属性。
再使用元素对象的 dataset 属性对自定义的属性进行操作。
注意：data-后面的属性有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld，我们不这么写，而写成data-hello-world。
在转成dataset的键名的时候，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。
console.log(_abaidu.getAttribute("data-hello-world"));

console.log(_abaidu.dataset.helloWorld); // 驼峰命名

Text 节点
可以通过nodeValue属性或者data属性访问节点中包含的文本，这两个属性中包含的值相同。
对nodeValue 的修改也会通过data反应出来，反之亦然。
<div id="dd">hello</div>

//获得文本节点
var text = document.getElementById('dd').firstChild;
//获得nodeValue
console.log(text.nodeValue);
//设置nodeValue
text.nodeValue = 'world';

//创建文本节点
var textNode = document.createTextNode('helloWorld!');
var element = document.createElement('div');
element.className = 'hello';
element.appendChild(textNode);
console.log(element);
document.body.appendChild(element);

CSS操作
1.style属性
操作 CSS 样式最简单的方法，就是使用网页元素节点的 getAttribute 方法、setAttribute 方法和 removeAttribute 方法。直接读写或者删除网页元素的 style 属性。
var asia = document.getElementById('asia');
asia.setAttribute('style','color: blue;');
1.Style对象
每个网页元素对应一个 DOM 节点对象。这个对象的 style 属性可以直接操作，用来读写行内 CSS 样式。

_p1.style.fontSize = "50px";

2.cssText属性
元素节点的 style 对象有个 cssText 属性，该属性可以读写或删除整个样式。

3.setProperty()，getPropertyValue()，removeProperty()
_p1.style.setProperty("font-size","50px");
需要注意的是：在使用 property 相关方法的时候，属性名使用的是和CSS样式中定义的一样的。而直接使用 style.xxxx 方式的时候，是需要将连词符号进行转化为驼峰命名方式的

事件模型
事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。

1. EventTarget接口
DOM的事件操作（监听和触发），都定义在EventTarget接口上。Element节点、document节点和window对象，都部署了这个接口。
该接口有三个重要的方法：
addEventListener：绑定事件的监听函数
removeEventListener：移除事件的监听函数
dispatchEvent：触发事件
addEventListener
该方法用于在当前节点或对象上，定义一个特定时间的监听函数
示例
// 语法：target.addEventListener(type,listenerFunc,false);

window.addEventListener("load", function(){
alert("hello listener");
});

document.getElementById("btn2").addEventListener("click",function(){
alert("hello, button");
});

type：事件的名称，大小写敏感
listenerFunc：监听函数，事件发生时，会调用这个函数
removeEventListener()
移除addEventListener方法添加的事件监听函数
var btn2Click = function() {
alert("hello, button");
};

document.getElementById("btn2").addEventListener("click", btn2Click);

document.getElementById("btn3").addEventListener("click",function(){
document.getElementById("btn2").removeEventListener("click",btn2Click);
});
dispatchEvent()：一般不怎么使用
2.监听函数
监听函数是事件发生时，程序所要执行的函数。它是事件驱动编程模式的主要编程方式。
在DOM中提供三种方法为事件绑定监听函数。
HTML标签的on-属性
HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。
<body οnlοad="alert('hello');alert('world');">
</body>
Element节点的事件属性
Element节点对象有事件属性，同样可以指定监听函数。
var btn4Func = function() {
alert("hello");
};

document.getElementById("btn4").onclick = btn4Func;

addEventListener方法
3.事件的种类
鼠标事件

鼠标事件是指与鼠标操作相关的事件

click事件、dblclick事件
mouseup事件（释放按下鼠标时触发）、mousedown事件（按下鼠标键时触发）、mousemove事件（鼠标在某个节点内部移动时触发）
mouseover事件、mouseenter事件都是鼠标进入一个节点时触发，区别是mouseenter只执行一次，而mouseover会在子节点上触发多次。
document.getElementById("ul1").addEventListener("mouseenter", function(event){
event.target.style.color = "red";
});
mouseout事件、mouseleave事件都是鼠标离开节点时触发，mouseout事件会冒泡，mouseleave事件不会。
事件冒泡和捕获

事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。