DOM内容

作者: 米卡卡米 | 来源:发表于2018-07-20 16:35 被阅读0次
dom => document object mode

就是把文档,变成对象的东西。就是dom
页面中的节点==(构造函数DOM API)==>构造出对应的对象


这个就是dom API.png

节点类型常量:

document.documentElement.nodeType 

获取,如果是1.则是表示是一个元素。例如<p><div>
如果是3 则表示文字 其他的key搜一下,这个比较常见。
[重点]毕业之前要了解一下DocumentFragment的优化
【nextSibing 可能会获取到文本】
【innerText和textContent 有区别的 主要用后面那个】
Node的接口
1.appendChild() :新增一个子节点对象。在xxx后新增XX
2.cloneNode():克隆一个子节点。如果cloneNode(ture)则是深拷贝。把要拷贝的东西下面内容全部拷贝。
用法:var div2=div1.document.cloneNode(ture) ; document.body.appendChild(div1)
3.isEqualNode()和isSameNode() 两个的区别。
isEqualNode() 方法检查两个节点是否相等。
如果下例条件为 true,则两个节点相等:
(1)节点类型相同
(2)拥有相同的 nodeName、NodeValue、localName、nameSpaceURI 以及前缀
(3)所有后代均为相同的子节点
(4)拥有相同的属性和属性值(属性次序不必一致)
isSameNode() 方法检查两节点是否是相同的节点。(相同)
document的接口内容

动态集合:xxx.childNodes 是动态集合。所谓动态集合就是一个活的集合,DOM树删除或新增一个相关节点,都会立刻反映在NodeList接口之中。
document.querySelectorAll方法返回的是一个静态集合。DOM内部的变化,并不会实时反映在该方法的返回结果之中。

1.尽量不用全局函数。很容易覆盖
2.可以用局部变量
3.立即调用函数。声明一个函数,然后立即调用这个函数

function x(){
var xxx=document.querySelector('#self')
console.log(xxx)}.call() 

这就是立即调用
但是如果这样 会报错。则可以用()将匿名函数代码包起来,则可以成功调用。

(function (){
var x=document.querySelector('#selef')
console.log(x)
}).call()

这样就不会报错。
也可以再函数之前加一个"-" "+"~"!"等符号则也不会报错

-function(){
var xx=document.querySelector('#selef')
console.log(xx)}.call()

4.let 和var。 var作用于会大于let。let是逃不出花括号的。而var可以。

相关文章

  • DOM内容

    就是把文档,变成对象的东西。就是dom页面中的节点==(构造函数DOM API)==>构造出对应的对象 节点类型常...

  • 12 DOM2 和 DOM3

    本章内容 DOM2 和 DOM3 的变化 操作样式的 DOM API DOM 遍历与范围 12.1 DOM 变化 ...

  • JS--DOM拓展

    关于DOM的内容实在是太丰富了,前面我们简单的介绍了DOM中关于DOM特性和内容还有DOM节点相关的知识点。其实主...

  • DOM树

    Document Object Model 一系列API规范 DOM包含内容: DOM Core:DOM核心结...

  • 19.DOM 进阶

    学习要点: 1.DOM 类型2.DOM 扩展3.DOM 操作内容 DOM 自身存在很多类型,在 DOM 基础课程中...

  • 11 DOM 扩展

    本章内容 理解 Selectors API 使用 HTML5 DOM 扩展 了解专有的 DOM 扩展 对 DOM ...

  • DOM 01(document Object Model)

    DOM可以动态的操作文档内容 原理 1:解析文档生成DOM树2:通过DOM标准接口+编程语言改变文档内容 ![Pa...

  • 【JavaScript笔记】JavaScript基础_Dom(1

    这里整理了DOM相关内容。 1.DOM DOM, 全称 Document Object Model 文档 对象 模...

  • 关于DOM(页面内容)

    html() 设置或返回被选元素的内容(innerHTML)返回内容(返回第一个匹配元素的内容):$(select...

  • DOM扩展内容小记

    选择符API 核心内容是使编程人员可以通过css选择符定位到DOM中的节点1.querySelector()方法该...

网友评论

      本文标题:DOM内容

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