元素的属性分为:
内置属性:
操作:innerHTML/Text //返回值是当期元素的内容
id //返回值是当期元素的id
title //获取title的标签值,这个title是从document中获取
classNmae //返回值是当前元素的class
href //返回值是当前元素的href值
以上属性可以获取,也可以设置
属性的获取:链接(待补充)
非内置属性(自定义属性):
getAttribute(name):获取指定对象的属性名的属性值
setAttribute(name,value):给指定对象设置属性名和属性值
removeAttribute(name):移除指定对象的属性
如何获取DOM节点:
obj.parentNode //获得父元素节点
obj.children //获得子元素节点的集合,不包含空白节点
obj.childNodes //获得所有子节点的集合,包含空白节点
obj.firstChild //返回第一个子节点,包含空白节点
(obj.firstElementChild) //返回第一个子节点(兼容)
obj.lastChild //返回最后一个子节点
(obj.lastElementChild) //返回最后一个子节点(兼容)
obj.nextSibling //获得下一个兄弟节点
(obj.nextElementSibling)//返回下一个兄弟节点(兼容)
obj.previousSibling //获得上一个兄弟节点
(obj.previousSibling) //返回上一个兄弟节点(兼容)
如何获取属性节点:
obj.attributes //获得所有属性节点,返回一个数组
过滤空白节点:
obj.childNodes //获得子节点的集合
节点属性 nodeType 返回值为数值
节点类型(nodeType) 节点名字(nodeName) 节点值(nodeValue)
元素节点 1 标签名 null
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
属性节点 2 属性名 属性值
注:通过遍历所有子节点,将空白节点过滤掉,得出所有的元素节点
节点的增删改查:
节点创建:
元素节点:document.createElement(tag标签名称)
文本节点:document.creatTextNode(文本内容)
属性设置:node.setAttribute(名称,值)
节点追加:
父节点.appendChild(子节点) //向父节点添加最后一个子节点
父节点.insertBefore(newnode,oldnode) //将newnode放到oldnode的前面
节点删除:
父节点.removeChild(子节点)
父节点.remove()
CSS DOM(拓展)
功能:使js可以动态给HTML添加css样式属性(行内样式)
语法:obj.style.css属性转化为js后的名称=属性值
注:css属性转化为js后的名称规则
一个单词直接写;
多个单词,第二个单词去掉“-”并且“首字母大写”;
通过js操作css样式时,要加“px”;
通过js添加的样式都会以行内样式追加