JavaScript学习日记之--DOM

DOM常规操作包括：1.获取文档元素；2.对文档元素进行增删改查操作；3.事件操作。

文档加载过程

1. 存在问题

浏览器加载一个页面时，是按照自上而下的顺序加载的，如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载，这会导致在JS中无法获取到页面中的DOM对象。

2. 解决方案

1) onload事件

onload事件会在整个页面加载完成之后才触发。为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样就可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

2) 把script标签放在body尾部

3) 建议：两者综合

文档页面元素获取

1. 根据id获取元素

var btn = document.getElementById("btn");

2. 根据标签名获取元素

var btn = document.getElementsByTagName("button")[0];

3. 根据name获取元素

var btn = document.getElementsByName("btn")[0];

4. 根据类名获取元素

var btn = document.getElementsByClassName("btn")[0]

5. 根据选择其获取元素

// 返回第一个符合选择器的DOM节点
var btn1 = document.querySelector("#btn");
var btn2 = document.querySelector("button");
var btn3 = document.querySelector(".btn");
// 返回所有符合选择器的DOM节点的集合
var btn4 = document.querySelectorAll("#btn")[0];
var btn5 = document.querySelectorAll(".btn")[0];

节点之间关系

网页中的所有内容都是节点，包括标签、属性、文本、注释等。

1. 获取父节点

var a = document.getElementsByTagName("a")[0];
var b = a.parentNode;  // 获取父节点
var c = a.parentElement;  // 获取父节点

2. 获取兄弟节点

var span = document.getElementById("span");
// 获取下一个兄弟节点
var nextEle = span.nextElementSibling || span.nextSibling;  // nextSibling方法获取到的节点包括换行和注释等标签  
// 获取上一个兄弟节点
var preEle = span.previousElementSibling || span.previousSibling;

3. 获取子节点

var box = document.querySelector("#box");
// 获取第一个子节点
var firstChild = box.firstElementChild || box.firstChild;
// 获取最后一个子节点
var lastChild = box.lastElementChild || box.lastChild;
// 获取所有的子节点
var children = box.childNodes;  // 包括换行、注释等子节点
var children2 = box.children;  // 所有元素子节点

4.

节点的nodeType属性

每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由Node类型中定义的12个常量表示。以下列举了常用的几个。

常量名	常量值	节点类型	描述
Node.ELEMENT_NODE	1	Element	代表元素节点
Node.ATTRIBUTE_NODE	2	Attr	代表属性节点
Node.TEXT_NODE	3	Text	代表元素或属性中的文本内容
Node.COMMENT_NODE	8	Comment	代表注释节点
Node.DOCUMENT_NODE	9	Document	代表整个文档（DOM树的根节点）

原文地址：https://www.cnblogs.com/Oliver-yzx/p/11488905.html