操作DOM节点

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的区别:

  1. parentNode是w3c的标准,parentElement是ie的,基本上parentNode可以替换parentElement。
  2. 在大多数情况下,parentNode和parentElement用处相同
  3. 唯一的区别在于当这个元素的父元素不是element元素时,parentElement会返回null
  4. 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
    原文作者:前端开发
    原文地址: https://www.jianshu.com/p/b73b270df56f
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞