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
网友评论