DOM节点操作

新增(创建节点)

创建元素节点

document。createElement("元素的名称")

 

创建文本节点

document.createTextNode("文本的内容")

 

创建属性节点

document.createAttribute("属性名")

创建的属性.value = "属性值"

将创建好的属性节点添加到某个元素节点上

目标元素节点.setAttributeNode(创建的属性节点)；

使用这种方式创建的属性节点会覆盖原本有的(覆写)

 

添加节点

1.appendChild：添加子元素

子元素会添加到父级元素的最后一个位置

 

2.insertBefore：把元素插入到指定元素之前

op.insertBefore(oDiv)　这种使用方法是错误的

op.parentNode.insertBefore(新元素, 目标元素)

 

移除节点

removeChild()

box.removeChild(oP)

父级节点.removeChild(移除的子节点)

可以移除元素节点，也可以移除文本节点

 

替换节点

replaceChild()

box.replaceChild(oDiv, oP)

父级节点.replaceChild(新节点, 要替换的目标节点)

注意：对于这个第一个参数，如果该参数的这个节点是已存在的节点，那么会将这个节点从DOM树中删除掉，然后添加到替换的位置

 

克隆节点（不管是深度还是浅度都不会克隆事件）

要克隆的节点.childNode(true || false)

此方法有两个参数

true：表示深度克隆（可以将里面所有的东西都克隆）

false：表示浅克隆（只会克隆元素本身）

默认参数为false

 

js操作css

1.document.createAttribute("style")

写入value值

插入属性节点

注意：覆写

 

2.元素.style = "font-size:100px;background:aqua;"

也可以来修改样式

同样覆写

 

3.元素.style.属性名 = 属性值

这种方法是添加写入

对于不符合变量名要求的元素可以采用

d1.style["font-size"] = "100px"

d1.style.fontSize = "100px"

对于float这种保留词，最好需要改写

谷歌：cssFloat

IE：styleFloat

 

4.元素.style.cssText

使用方式上面和元素.style一致（元素.style这种方式在比较老的浏览器中不支持）

 

5.注意使用上的一个顺序问题

 

6.读取属性（只能去读取行内的属性）

元素.style.属性可以获取到对应的属性值

如果行内写了对应的属性值，获取到对应的属性值

如果行内没有写对应的属性值，获取到空字符串''

 

7.移除某个属性

元素.style.属性 = '';

注意这个不能使用delete方法删除属性

 

不太常用的方法：

这3个方法全是挂载在style下面的

元素.style.xxx()

读取行内样式：元素.style.getPropertyValue(属性名)

设置行内样式：元素.style.setProperty(属性名, 属性值)

移除行内样式：元素.style.removeProperty(属性名)

 

getComputedStyle(要获取样式的元素, 伪类（没有伪类写上null）)

可以用来获取外部样式表中的样式，返回一个样式的集合

 

js获取元素的大小

1.视口大小

document.documentElement.clientHeight

获取当前浏览器视口的高度，我们现在所能看到的一个高度

document.documentElement.clientWidth

获取当前浏览器视口的宽度，我们现在所能看到的一个宽度

 

document.body.clientHeight：获取body元素的实际高度

document.body.clientWidth：获取body元素的实际宽度

 

window.innerHeight：获取浏览器实际的高度

window.innerWidth：获取浏览器实际的宽度

 

window.innerWidth和document.documentElement.clientWidth

两者的区别就在于后者不计入滚动条的宽度

 

outerWidth和outerHeight获取的是浏览器整体的大小（标题栏，地址栏，可视区域）