操作DOM节点

作者: 椰果粒 | 来源:发表于2018-05-06 20:38 被阅读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的区别:

  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

相关文章

  • DOM (javascript DOM节点操作)

    DOM (javascript DOM节点操作) 本节目录 查找DOM元素 DOM节点操作 javascript操...

  • Dom操作

    操作节点 获取节点 获取子节点 更新DOM innerHTMLinnerTEXT 插入DOM appendChil...

  • 05-DOM相关知识点讲解

    DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...

  • JQuery---dom相关节点操作

    dom相关节点操作 /* DOM操作管理 属性...

  • 第十七章 DOM基础

    要点: DOM介绍 查找元素 DOM节点 节点操作 什么是 DOM? DOM即文档对象,针对HTML和XML文档的...

  • Vue解决了哪些问题

    虚拟 dom:dom 操作时非常耗性能的,不再使用原生的 dom 操作节点,极大的解放 dom 操作,但具体操作的...

  • DOM

    一.dom操作 dom的组成 元素节点属性节点文本节点 通过nodeType查看类型 1 元素节点 ,2 属性节...

  • DOM

    一、对象基础(补充) 二、DOM获取节点 三、间接获取节点 四、DOM节点的添加和删除 五、DOM属性操作 六、练...

  • DOM操作-节点操作

    创建节点 创建属性节点 插入节点 删除节点 remove() 该节点包含的所有后代节点都会被删除 返回被已删除的节...

  • dom操作.节点操作

    尝试使用另一种方法遍历

网友评论

    本文标题:操作DOM节点

    本文链接:https://www.haomeiwen.com/subject/faoyrftx.html