DOM

DOM ---- 文档对象模型

节点划分的三个属性

nodeType --- 节点类型 
　　对应元素节点返回的是其标签, 对应属性节点返回的是属性名, 对于文本节点 #text
nodeName --- 节点名字
　　返回数值, 1为元素, 2为属性, 3为文本
nodeValue --- 节点值
　　返回的是对应的文本, innerText 对于元素节点是没有文本的, 没有的话返回值为null, 文本节点存在文本 nodeValue里面是不会解析html代码的, 相当于innerText 对应的文本节点的使用

获取子节点

childNodes --- 获取所有子元素节点和文本节点
　　获取对应的文本节点, (包含空格的) , 元素节点(不包含属性节点), nodeList
children --- 获取所有的子元素节点 --- 常用的 --- htmlcollection

parentNode --- 后期对应父节点

removeChild --- 移出子节点

Math的方法(静态方法)

• abs绝对值
• random 随机数
• pow 幂次方
• max 最大值
• min 最小值
• ceil 向上取整
• floor 向下取整
• round 四舍五入
• sqrt 开平方
• 属性
  • PI 圆周率
  • E科学计数法

属性节点相关内容(针对元素节点,返回属性)

attributes --- 所有元素都具备的属性, 获取里面所有属性节点, 返回的是一个伪数组 (NamedNodeMap)

属性操作的三个方法

1. 查询/获取 --- 获取属性值 --- getAttribute(属性名)
2. 删除 --- delete 全删 /remove 删内容不删日志 --- removeAttribute(属性名)
　　例如 : div.removeAttribute("title"); --- title属性被删除
3. 添加 / 添加重复则为修改 add replace / set --- setAttribute(属性名, 属性值)
　　例如 : div.setAttribute("class", "box");

NamedNodeMap里面的方法

• getNamedItem----获取对应属性节点
• setNamedItem ----设置对应属性节点
• removeNamedItem ---- 移除对应节点

获取内置属性(自带的)的方法 --- 通过对应的元素节点.属性名 --- document.getElementById("input").type
节点的操作

• 元素节点的创建 --- createElement
• 属性节点的创建 --- createAttribute
• 文本节点的创建 --- createTextNode

节点增删改的方法

• appendChild --- 添加到后面
• insetBefore --- 添加到前面
• remove --- 移出自身的所有内容
• removeChild ---移除对应的子节点
• replaceChild --- 替换里面的所有内容

节点之间的关系

父子关系

• childNodes --- 获取所有的子节点(文本节点 及 元素节点)
• children --- 获取所有的子元素节点
• parentNode --- 父节点
• parentElement --- 父元素

兄弟关系

• previousSibling --- 前一个节点
• previousElementSibling --- 前一个元素节点
• nextSibling --- 后一个节点
• nextElementSibling --- 后一个元素节点
• firstChild --- 第一个节点
• lastChild --- 最后一个节点