DOM节点元素操作

DOM的介绍 - Document Object Model(文档对象模型) - 每一个页面都有一个document对象，它是通过文档对象模型具体化的一个对象。它可以操作页面中的所有内容。

修改元素样式： 元素.style.backgroundColor = “yellow”; 获取样式：

document.getElementById() => 根据ID获取元素 返回值是元素对象 document.getElementsByTagName() =>根据标签名获取元素 返回值是集合(类数组对象) document.getElementsByName() =>根据name属性获取元素 返回值是集合(类数组对象) document.getElementsByClassName() => 返回值是集合(类数组对象) document.querySelector() => 根据类名获取元素 返回的是元素 document.querySelectorAll() => 返回值是集合(类数组对象)

** HTML属性** 可以分为标准属性与非标准属性(自定义属性)

标准属性 指的是由W3C制定的属性 通用属性 所有标签都有的属性 比如 id class style title等特有属性 只有一个或者几个标签有的属性 比如 name type checked 等 非标准属性 指的是由程序员自己定义的属性 元素的基本操作 标准属性可以直接通过元素打点获取 打点修改 (或者使用方括号语法也可以) 注意避讳关键字 // 避讳JS中的class关键字 元素.className = "abc"; // 读取name属性值 var str = 表单元素.name;

非标准属性要通过

- setAttribute(propName, propValue); 设置、修改属性值 - propName 表示属性名 - propValue 表示属性值 - getAttribute(propName); 获取属性值 - propName 表示属性名 - removeAttribute(propName); 移除属性(从HTML标签身上移除) - propName 表示属性名

节点的属性

nodeType 节点类型 属性值为数字 1 表示元素节点2 表示属性节点3 表示文本节点8 表示注释节点9 表示文档节点(就一个 document)

获取属性节点 要通过 元素.attributes 来获取到集合 再通过下标获取想要的属性节点

nodeName 节点名称 属性值为字符串 元素节点的名称为大写的标签名属性节点的名称为属性名文本节点的名称为 #text注释节点的名称为 #comment文档节点的名称为 #document nodeValue 节点值 元素节点没有节点值 null属性节点的节点值就是属性值文本节点的节点值是文本内容注释节点的节点值是注释内容文档节点没有节点值 null节点的关系 节点关系就两种：父子关系 兄弟关系 - 父子关系 - 父找子 - childNodes 所有的节点 - children 所有的元素节点 - firstChild 第一个节点 - firstElementChild 第一个元素节点 - lastChild 最后一个节点 - lastElementChild 最后一个元素节点 - 子找父 - parentNode 父节点 - 兄弟关系 - nextSibling 下一个兄弟 - nextElementSibling 下一个元素兄弟 - previousSibling 前一个兄弟 - previousElementSibling 前一个元素兄弟

节点的操作

创建节点

document.createElement(标签名字符串)document.createTextNode(文本内容) // 创建一个div元素节点 var div = document.createElement("div"); // 创建文本节点 var textNode = document.createTextNode("我是一个通过JS脚本创建出来的文本节点"); // 这样的节点只在JS环境中存在,还没有到DOM树上去.所以叫做"孤儿节点"

追加节点

父元素.appendChild(子元素) 子元素会被追加到父元素的最后,作为lastChild节点 // 创建一个节点 var div = document.createElement("div"); // 向父元素中追加一个节点 var dom = document.getElementById("#box"); dom.appendChild(div);

插入节点

父元素.insertBefore(newChild, oldChild) newChild是新元素oldChild是父元素的已有元素newChild会插入到oldChild的前一个位置 // 创建一个节点 var div = document.createElement("div"); // 获取父元素 var box1 = document.getElementById("box1"); // 插入到box1之前 document.body.insertBefore(div, box1);

替换节点

父元素.replaceChild(newChild, oldChild) newChild是替换上的元素oldChild是被替换的元素 // 创建一个节点 var div = document.createElement("div"); // 获取树上的元素 var box1 = document.getElementById("box1"); // 替换box1 document.body.replaceChild(div, box1);

克隆节点

元素.cloneNode(boolean);

boolean是一个布尔值 决定是否克隆子元素 如果为真则克隆子元素 否则不克隆 默认是false // 选中一个节点 var node = document.querySelector(".one"); // 复制该节点得到新节点 var cloneNode = node.cloneNode(true);

删除节点

元素.remove() 让调用remove方法的元素 下树父元素.removeChild(子元素) 让父元素中的子元素下树 // 获取元素 var box2 = document.getElementById("box2"); // 元素自己下树 box2.remove(); // 获取元素 var box2 = document.getElementById("box2"); // 让body把box2删掉 document.body.removeChild(box2);