JavaScript---DOM节点和节点操作

DOM和节点

• DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准,是文档对象模型
• document是系统提供的一个对象, 这个对象就是DOM对象, 这个对象以树的形式保存了界面上所有的内容

宿主对象

• 简单的可以理解为浏览器提供的对象,DOM和BOM中的对象都是宿主对象

获取界面上的元素

getElementById

注意点: 如果id名称重复了, 返回的是第一个找到的元素,返回的是一个宿主对象

getElementsByClassName

注意点:

• 找到所有类名为指定名称的元素, 放到一个集合对象中返回给我们,这个集合对象是一个伪数组(对象)
• 有兼容性问题 IE9才支持

getElementsByTagName

getElementsByName

• 注意点: 在不同浏览器执行结果可能不同

querySelector

CSS中所有的选择器都可以在这里使用

• 注意点:
  • 会返回第一个找到的元素
  • IE8才能用

文档的加载过程

1.浏览器在加载一个界面的时候, 是按照从上至下的顺序加载的
2.如果将script标签写在head标签中, 那么执行js代码的时候, 网页还没有加载完毕
DOM对象也还没有准备完毕, 所以可能获取不到我们需要的元素
3.如果将script标签写在body标签的最末尾, DOM对象已经准备完毕了, 所以我们可以获取到我们需要的元素
4.如果非要把script标签写在head标签中, 那么需要执行的代码最好写好onload方法中,
onload方法的作用是等待网页上所有的资源加载完毕之后才会执行
网页上所有的资源包含所有的标签/图片/CSS文件/JS文件等
5.window.onload和将script标签写在body最后的区别:
window.onload执行时, 不仅DOM对象准备好了, 网页上所有资源也都准备好了
body后的script标签执行时, 仅仅代表DOM对象准备好了, 而网页上的其它资源不一定准备好了
综上所述: body后的script标签的效率高于window.onload

获取父子元素和结点

parentElement

• 获取父元素,有兼容性问题

parentNode

• 获取父节点

children

• 获取当前元素所有的子元素

childNode

• 获取当前元素所有的子节点

获取当前元素的上一个和下一个元素或节点

previousElementSibling

previousSibling

nextElementSibling

nextSibling

• 两个都有各自支持的浏览器
• 企业开发中一般通过 对象.previousElementSibling || 对象.previousSibling

获取指定元素的第一个或最后一个子元素

firstElementChild firstChild

lastElementChild lastChild

节点的增删改查(CRUD)

增

createElement

• 根据指定的标签名称创建一个标签(元素)
  var oA = document.createElement("a");

appendChild

• 使用: 父元素.appendChild(创建好的DOM对象)
• 将传入的元素添加到调用的元素中
• 注意点: 会添加到指定元素中的末尾

insertBefore

• 使用: 父元素.insertBefore(添加的元素, 子元素)
• 将添加的元素添加到子元素的前面

删

• 自己不能删自己
• 只能通过父节点调用removeChild删除子节点
• 使用: 删除的对象.parentNode.removeChild(删除的对象);

节点属性的操作

直接获取

• 通过DOM查询到对应的元素之后, 返回给我们的是一个对象
• DOM就已经将这个元素所有的自带的属性都已经封装到这个对象中了, 所以可以直接通过对象操作属性的方式来操作属性
• 使用: 对象.属性
• 注意点: 不可以操作自定义属性

getAttribute

• 使用: 对象. getAttribute("属性名称")
• 注意点: 可以操作自定义属性

直接设置

• 使用: 对象.属性 = 新设置的属性的值

setAttribute

• 使用: 对象. setAttribute("属性名称", "值")
• 注意点: 可以操作自定义属性

---

innerHTML和innerText

innerHTML

获取或者设置调用者中的内容

• 注意点:
  • 如果是获取, 会原封不动的将调用者中的内容返回给我们(包含标签)
  • 如果是设置, 会利用设置的值覆盖调用调用者中所有的内容, 并且如果设置的值中包含了HTML标签, 也会解析创建之后再添加

innerText

获取或者设置调用者中的内容

• 注意点:
  • 如果是获取, 会去掉调用者中的标签, 将其它的内容返回给我们, 并且会去除两端的空格
  • 如果是设置, 会利用设置的值覆盖调用调用者中所有的内容, 并且如果设置的值中包含了HTML标签, 不会解析和创建, 会原样添加
  • 有兼容性的问题, 不能很好的支持所有的浏览器

textContent

获取或者设置调用者中的内容

• 注意点:

  • 如果是获取, 会去掉调用者中的标签, 将其它的内容返回给我们, 但是不会去除两端的空格
  • 如果是设置, 会利用设置的值覆盖调用调用者中所有的内容, 并且如果设置的值中包含了HTML标签, 不会解析和创建, 会原样添加
  • 有兼容性的问题, 不能很好的支持所有的浏览器

• innerText和textContent结合起来一起用可以解决兼容性问题

---

设置节点的样式

style

• 使用: 对象.style.属性 = 值(字符串)
• 注意点:
  • 通过style属性设置的样式都是行内样式, 所以会覆盖掉CSS代码设置的样式
  • CSS中用-连接的属性名称, 都会去掉-, 将后面一个单词的首字母大写
  • 宽高需要添加单位,否则设置不上去

className

• 使用: 对象.className = "类名"
• 类在css文件中设置了样式,通过动态绑定类来绑定样式

两者的选择

• 如果是操作个别的样式, 那么推荐使用style属性
• 如果是操作多个的样式, 那么推荐使用className属性

---

DOM事件

点击事件----onclick

• 使用: 元素.onclick = function(){};
  • 当调用者被点击的时候, 就会执行后面赋值的这个函数
• 注意点:
  • 如果是给a标签添加点击事件, 由于a标签对点击事件有默认的实现(跳转), 所以需要注意的是我们添加的点击事件不会覆盖掉系统默认的点击事件, 如果不想使用系统的默认事件, 那么只需要在我们添加的函数中return false即可

鼠标移入移出事件

移入----onmouseover onmouseenter

• 对于初学者来说, 为了避免未知的BUG, 建议使用onmouseenter

移出----onmouseout onmouseleave

• 对于初学者来说, 为了避免未知的BUG, 建议使用onmouseleave

监听移动----onmousemove

焦点和内容改变

获取焦点----onfocus

失去焦点----onblur

监听元素内容改变----onchange

• 注意点: onchange事件不能时时获取数据的改变
  • onchange事件只有失去焦点的时候才会执行

监听元素内容改变----oninput

• 注意点: 只有IE9及以上才能使用

监听元素内容改变----onpropertychange

• 注意点: 这是低版本IE特有的方法, 和oninput结合着用可以解决兼容性问题