DOM内容

2018-07-20  本文已影响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可以。

上一篇 下一篇

猜你喜欢

热点阅读