05.使用Dom操作css

首先我们先不讨论css 先看下如何获取dom节点

• 获取子节点
  Element.childElementCount获取子元素的个数。child儿子，Element元素，Count数量

    1
    
2
    
3
    
4
    
5

打印的结果是4，这里我们发现，没有被包裹在任何标签里的1并没有被算在里边，因为他是childElementCount(获取子元素数量)，而孤零零的这个1并不是子元素。

那怎么能获取到这个 1 呢 接下来我们个方法 叫做Element.childNodes获取子节点

那么有小伙伴会问啦何为节点？
元素里的标签，文本包括换行的空格都是节点

//代码承接上一部分
console.log( oP.childNodes )/*
    NodeList(9) [text, p, text, p, text, p, text, p.four, text] 
    length: 9
    0: text  点开这个会发现是1
    1: p
    2: text 空
    3: p
    4: text 空
    5: p
    6: text 空
    7: p.four
    8: text 空
*/

上边的例子中，第一个text是1，然后我们发现每个p标签之间都多了一个text(文本节点)，把text(文本节点)点开发现是空的什么都没有，这个空text来源于p标签之间的换行。

1
2
3
4
5

如果我们这样写的话 那些空就会消失

接下来我们看 如何精确的获取子元素
Element.children 某个元素的所有子元素列表

console.log( oP.children )//HTMLCollection(4) [p, p, p, p.four]

这样就可以精确的获取子元素啦

• Element.firstChild元素的第一个子节点(注意哈，这里是节点)：

console.log( oP.firstChild )//"1"

• Element.firstElementChild元素的第一个子元素(注意哈，这里是元素)：

console.log( oP.firstElementChild )//
2

• Element.lastChild元素的第一个子节点(注意哈，这里是节点)：

console.log( oP.lastChild )//text 点开是个空的，因为最后一个p标签和div的结束标签之间有换行

• Element.lastElementChild元素的第一个子元素：

console.log(oP.lastElementChild)//
5

• Element.removeChild(node)删除子节点(注意是子节点，不是元素)，会把被删除的节点返回出来，因此我们可以用变量接受也可以直接打印：

//除了上边这种方法以外，我们还可以：
console.log( oP.removeChild(oP.childNodes[0]) )//"1",页面中的1也被删除了

​ 假如我想删除一个元素怎么办：

//依旧是先获取再删除，加入说我们现在想删除
5
var node = document.querySelector('.box > .four')
console.log( oP.removeChild(node) )//
5
,删除了这个p标签，同时把他返回给了我们

​ 上边讲的方法对我们的6个选择器都有效。

​ 那么上边主要是对子元素进行的一些操作，除此之外我们还可以获取到父元素。

• Element.parentNode：获取父节点:

var four = document.querySelector('four')
console.log( four.parentNode )//可以获取到four的父元素及父元素里的所有内容提供，因为父节点只有一个所以返回给我们的不是列表，而直接是这个元素

• Element.previousSibling元素的上一个节点(节点！！)，previous上一个，sibling兄弟：

    
1
    
2
    
3
    
4

• Element.previousElementSibling元素的上一个兄弟元素，previous上一个，sibling兄弟：

console.log( box.previousElementSibling )//
1

​ 假设这个元素已经是第一个了，那么：

var first = document.querySelector('div')
console.log( first )//
1
console.log( first.previousElementSibling )//null

• Element.nextSibling获取元素的下一个节点(节点！！)，next下一个，sibling兄弟：

console.log( box.nextSibling )//#text 点开以后是一个空字符串，这个空字符串来源于元素间的换行

• Element.nextElementSibling获取元素的下一个兄弟元素：

console.log( box.nextElementSibling )//
3

• Element.hasChildNodes()父元素是否有子节点，有返回true，没有返回false，传参无效：

    

    

    
    
1
    

        

    

• Element.append()添加子节点(可以是文本节也可以是元素)，append追加：

    
hello
    

• document.createElement()创建一个元素，create创造：

• document.createTextNode()创造文本节点：

    
hello

​ 上边的操作中我们可以创造一个元素，或者创造一个文本节点，然后添加到某个元素里，但是我们的网页第一次在加载时是这样的:js不算，把页面中要显示的内容都读完以后，文档就关闭了，然后我们用js去改变html的时候，文档就会重新打开，所以我们要尽可能一次性的把js创造的元素一起添加进某个地方。因此我们需要：

• document.createDocumentFragment()创建文档碎片Fragment(碎片)：

    
hello

​ 在文档中写入：

document.write('')，传一个字符串作为参数，如果不是字符串则会被转化为字符串。如果字符串里包含了标签，会被转化。会在body标签的最后写入。

    
1
    
2

​ 最后的显示结果为：

    
1
    
2
    
    
123456
    789

​ 上边的都是和html有关的知识，接下来我们看看css：

我们无法修改在style标签或者css文件里写入的css，我们添加的css属性最后都会以行内样式显示出来，这是一个巧妙的设计，因为行内样式不存在优先级问题。

• window.getCompotedStyle(Element)返回元素计算后的样式(也就是最终在页面中显示的样式)，这是一个只读属性，也就意味着我们无法去改变里边的值，只能拿到。

• 我们可以通过Element.style.property，Element某个具体的元素，style样式，property属性名来给元素设置css样式，不过最后css样式会显示在标签的style属性里。

hello.style.width = '300px'//此时我们看到元素的宽度变为300px，并且可以在控制台里看到样式被写在了元素的style标签里。

​ 如果是已横岗链接的属性，则要改成驼峰写法：

background-color css写法

backgroundColor js写法

hello.style.backgroundColor = 'purple'//颜色变成了紫色
hello.style.backgroungImage = 'url()'//设置背景图片，注意！()不用添加引号

​ 所有的属性都可以通过这种形式设定，但是有一个属性比较特别，不能直接设置：

hello.style.float = 'left'//在ie浏览器下无效
//要写成
hello.style.cssFloat = 'left'//nice！生效