操作DOM节点

2018-05-06 本文已影响12人椰果粒

DOM样式

注意元素的位置，中间有无空格

<div id="wrapper" style="width: 100px;height: 100px;border: 1px solid #ccc;padding: 10px">
    <div class="previos">上一个兄弟节点<p>prevoius</p></div>
    <div class="content">这是一个文本节点
        <div>
            <p>444</p>
        </div>
        <p>11</p>
        <span>123</span></div>
    <p>22</p>
    <p>33</p>
</div>s

一：获取DOM的几种方式

querySelector()：查询第一个符合条件的元素
querySelectotAll()：查询所有符合调教的元素，返回数组
getElementById()：查询id，一个值
getElementsByTagName()：返回符合条件的数组，查询的是标签，比如p,div,span等
getElementsByClassName()：返回数组，查询的是符合的class

var el = document.querySelector(".previos") // 获取第一个class为previous的元素
var el1 = document.querySelectorAll("div.pre,div.next") // 获取所有的class为pre和next的div元素
var wrapper = document.getElementById("wrapper")
var wrapper1 = document.getElementsByClassName("wrapper")   // 获取class为wrapper的集合
var wrapper2 = document.getElementsByTagName("p") // 获取所有p标签的集合
var content = document.getElementsByClassName("content")[0]

二：获取DOM节点的父子兄弟节点

// 获取父节点，父元素
console.log(el.parentNode)  // 父元素，包含所有子元素和孙子元素
console.log(el.parentElement)

// 获取content的所有直接子元素（没有孙元素），不包括text（element的属性）
console.log(content.children)   // [div,p,span]
// 获取所有的子节点，当元素与元素之间有空格时，会被当成一个text节点。只能获取到子节点，孙子节点无法获取（node的属性）
console.log(content.childNodes) // [text,div,text,p,text,span]

// 查询子元素，document.表示整个DOM树的子元素，document也可以换成别的元素
var div1 = content.getElementsByTagName("div")
console.log(div1)   // [div]

// 获取第一个和最后一个子元素，包含子元素孙元素等。非文本（element的属性）
console.log(content.firstElementChild)  // <div><p>444</p></div>
console.log(content.lastElementChild)   // <span>123</span>

// 获取第一个子元素，此子元素可以是DOM元素，也可以是文本节点元素。请注意两者的区别以及DOM元素之间是否有空白（node的属性）
console.log(content.firstChild) // 这是一个文本节点
console.log(content.lastChild)  // <span>123</span>

// 获取上一个和下一个兄弟节点（包含子元素）（element的属性）
console.log(content.previousElementSibling)
console.log(content.nextElementSibling)

// 与上边有element的区别：可以是文本元素（空白）（node的属性）
console.log(content.previousSibling)
console.log(content.nextSibling)

parentNode和parentElement的区别：

parentNode是w3c的标准，parentElement是ie的，基本上parentNode可以替换parentElement。

在大多数情况下，parentNode和parentElement用处相同

唯一的区别在于当这个元素的父元素不是element元素时，parentElement会返回null

console.log(document.body.parentNode) // body里的那一堆dom
console.log(document.body.parentElement) // body里的那一堆dom
console.log(document.documentElement.parentNode) // document
console.log(document.documentElement.parentElement) // null

检验节点时什么类型用 nodeType

el.parentNode.nodeType       // 1
content.firstChild.nodeType  // 3
document.nodeType            // 9

1：元素节点，比如<div><p>等
2：属性attr
3：文字节点
7：xml文档
8：comment节点，也就是注释
9：document节点
10：描述文档类型的 [DocumentType] 节点。例如 <!DOCTYPE html> 就是用于 HTML5 的
11：documentFragment节点

element与node的区别：
node包含以上几种，element是node类型中的一种，nodeType返回1的那个就是element
children是element的属性，childNodes是node的属性，node的children属性是undefined
了解了node与element的区别之后，上述代码就很好区分了

三：获取和修改某个元素的宽高

// 获取元素的宽高
console.log(wrapper.style.width)    // 100px（样式宽）
// 获取视口的宽度
console.log(wrapper.clientWidth)    // 120（样式宽+padding）
console.log(wrapper.offsetWidth)    // 122（样式宽+padding+border）
  
// 修改元素的宽高
wrapper.style.width = 200 + "px"
console.log(wrapper.style.width)    // 200px

width，clientWidth，offsetWidth区别
width：样式宽
clientWidth：样式宽+padding
offsetWidth：样式宽+padding+border

四：改变样式

// 添加，移除子元素
content.appendChild(sp1)    // 默认添加到最后一个子元素的后面
content.removeChild(sp1)
// 替换子元素，两个参数，分别为(新元素，被替换的元素)
wrapper.replaceChild(sp1,el)
// 给wrapper添加一个子元素，在content元素之前添加。(新元素，在哪个元素之前)。如果要添加的元素已经存在，就不会重复添加
wrapper.insertBefore(p1, content)

console.log(content.attributes)

// 获取元素的属性值
console.log(content.getAttribute('class'))  // content
// 修改/设置元素的属性
content.setAttribute("width","100")
// 判断元素属性是否存在
console.log(content.hasAttribute("width"))  // true
// 移除元素的属性
content.removeAttribute("width")
// 只要有属性就返回true
console.log(content.hasAttributes())    // true