比较详细的javascript DOM 学习笔记第1/2页

你好，以下是详细的 "比较详细的JavaScript DOM学习笔记第1/2页" 完整攻略：

目录

1. DOM介绍
2. DOM节点操作
3. DOM样式修改
4. 事件处理
5. AJAX与DOM

1. DOM介绍

DOM（文档对象模型）是指HTML文档的对象模型。浏览器加载HTML文件后，会生成一颗DOM树。这棵树包含了文档的所有元素，每个节点都是一个对象，开发者可以通过JavaScript访问和修改这个对象，从而达到操作文档的目的。

2. DOM节点操作

访问节点

1. getElementById方法：根据元素的id属性获取元素。返回一个元素对象。

javascript
var el = document.getElementById('myId');

1. getElementsByTagName方法：根据元素标签名获取元素。返回一个数组。

javascript
var els = document.getElementsByTagName('p');
console.log(els[0]); // 获取第一个p元素

1. getElementsByClassName方法：根据元素类名获取元素。返回一个数组。

javascript
var els = document.getElementsByClassName('myClass');
console.log(els[0]); // 获取第一个类名为myClass的元素

1. querySelector方法：根据CSS选择器获取元素。返回一个元素对象。

javascript
var el = document.querySelector('#myId .myClass');

1. querySelectorAll方法：根据CSS选择器获取元素。返回一个数组。

javascript
var els = document.querySelectorAll('#myId .myClass');
console.log(els[0]); // 获取第一个id为myId、类名为myClass的元素

操作节点

1. 创建节点：使用createElement方法创建一个新的节点对象。

javascript
var el = document.createElement('p');

1. 插入节点：使用appendChild方法插入一个节点到指定的节点中。

javascript
var parent = document.getElementById('parent');
var el = document.createElement('p');
parent.appendChild(el);

1. 替换节点：使用replaceChild方法替换一个节点。

javascript
var parent = document.getElementById('parent');
var newEl = document.createElement('p');
var oldEl = document.getElementById('old');
parent.replaceChild(newEl,oldEl);

1. 删除节点：使用removeChild方法删除一个节点。

javascript
var parent = document.getElementById('parent');
var el = document.getElementById('myId');
parent.removeChild(el);

3. DOM样式修改

可以使用style属性修改DOM元素的属性。

var el = document.getElementById('myId');
el.style.color = 'red';

4. 事件处理

可以使用addEventListener方法给DOM元素绑定事件处理程序。

var el = document.getElementById('myId');
el.addEventListener('click', function() {
   console.log('Clicked!');
});

5. AJAX与DOM

AJAX是一种技术，可以在不刷新页面的情况下向服务器发送请求和接收响应。可以使用XMLHttpRequest对象实现AJAX请求。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.onload = function() {
   // 请求完成后调用的函数
   var data = xhr.responseText;
   var el = document.getElementById('myId');
   el.innerHTML = data;
}
xhr.send();

以上是对 "比较详细的JavaScript DOM学习笔记第1/2页" 的完整攻略。关于示例的说明，第2部分中的每个操作方法都包含了一个示例，示例足够简单易懂，希望这些内容能够帮助你更好地理解和掌握DOM操作的基本方法。