js—— 样式操作和节点操作

1.样式操作：

# 行内样式（设置到元素行内）

特点： 设置style.属性名     设置到元素行内

       获取style.属性名    可以获取行内样式  获取不到文本内部及外部样式


#计算样式：（获取文本外部的样式）

获取元素文本外属性值：

getComputedstyle(对象).属性名字  只能获取 不能设置   ##注意 用在---》父盒子没有限定高度 完全有内

容撑开的时候，如果想要获取父盒子的高度就可以用这个。


js  操作样式（衣服）--->对象.className = '样式名'

                      对象.className = ' '  //清除样式

h5 操作样式 (衣服)--->对象.classList.add('样式名')

                     对象.classList.remove('样式名')

                    对象.classList.toggle('样式名') //切换样式

2.节点操作：（创建、插入、删除、查找）

#创建元素

1.document.write('<li>我是li元素</li>')

2.对象.innerHTML = '<li>我是li元素</li>'  可以用一两个标签的时候 不能用在循环里 



3.var TagObj = document.createElement('标签名')   //创建一个标签节点  标签（元素）


    var text = document.createTextNode('内容')   //创建一个文本节点


    TagObj.appendChild(text)    //挂接文本节点到标签节点


//添加属性和样式

  TagObj.属性名     TagObj.setAttribute('属性名','属性值')

  TagObj.style.属性名 = ''  /穿衣服   className  classList


//挂接在文档树上（父元素）

父元素.appendChild(TagObj)

----------------------------------------------------------------------------------------

# 插入元素

（1）尾插： 父元素.appendChild(子元素)  //将子元素插入到父元素内容末尾

（2）任意位置插入：父元素.insertBefore(新节点，参考节点)

（3）删除： 父元素.removeChild(子元素)

（4）替换：父元素.replaceChild('新元素','旧元素') //把旧元素替换成新元素


----------------------------------------------------------------------------------------

#查找元素：

父元素.children  找到父元素所有子元素   集合(数组)

子元素.parentElement  找子元素对应的爸爸

上一个兄弟节点：元素.previousElementSibling

下一个兄弟节点： 元素.nextElementSibling

第一个：元素.firstElement

最后一个：元素.lastElement