js中提到的dom引用是什么意思

js中提到的dom引用是什么意思,第1张

这两行代码要区分的是DOM对象和jQuery对象的区别。

DOM对象和jQuery对象是两种不同的对象,它们的实例也因此具有不同的属性和方法。通常要 *** 作页面中的节点,我们都需要想办法获取对该节点的引用。比如如下代码:

var dom = documentgetElementById('节点id');

这是通过节点的id来获取一个页面节点,也就是对节点的引用。这个时候,我们对变量dom的任何 *** 作,实际上就是对页面节点的 *** 作,比如说修改样式、移除节点、获取属性等等。如下:

domstyledisplay = 'none'; // 隐藏节点

domparentNoderemoveChild(dom); // 删除节点

var height = domoffsetHeight; // 获取节点高度

像上面的style、parentNode、removeChild、offsetHeight等等,都是DOM对象的属性或方法。

因为DOM对象不属于javascript的一部分,它是各个浏览器对javascript的扩展,但各个浏览器又都在实现上有一些不一致,导致javascript代码需要处理很多兼容性问题。为了解决这些兼容性问题,提高开发效率,jQuery库就诞生了。

jQuery解决了兼容性问题,再加上它的实现极其巧妙,因此得到了很多人的吹捧。以前有一点javascript基础的人,要写出稍微复杂些的特效,几乎都不可能,但因为jQuery的出现,类似显示隐藏、各种动画效果,都只需要简单的几行代码即可。有些人甚至觉得,jQuery甚至都能替代javascript,而且在各个前端学习的站点、博客中,也是将jQuery和javascript并列作为一类。

但问题是,不了解基础的javascript,在遇到问题、异常的时候,你就只能干瞪眼了。任何语言,框架和库都无法取代最基础的语法,而且框架和库也都是由最简单的语法丰富起来的。

jQuery实际上可以说是一个大的类——javascript实现的类。以一个简单的模型来说,如下:

;(function(window, undefined){

window$ = windowjQuery = jQuery;

// 定义jQuery类

function jQuery(selector, content){

content = content || document;

var eles = contentquerySelectorAll(selector);

var len = eleslength;

// 给jQuery对象添加长度属性

thislength = len;

// 方便获取dom对象,获取实例:jQuery('#id')[0];

for(var i = 0; i < len; i++){

this[i] = eles[i];

}

}

// 扩展原型

jQueryprototype = {

// 构造函数

constructor : jQuery,

// 根据索引获取dom对象

get : function(index){

return this[index];

}

}

})(window);

这是一段jQuery的模拟代码,你可以使用如下方式调用:

var jqObj = new jQuery('class');

因为jQuery的特殊处理,写jQuery代码的时候不需要new即可用,但这里没有处理,所以需要加上new关键字。

上面返回的jqObj,就是我定义的jQuery的一个对象,它是jQuery对象,已经不是DOM对象了。我可以写如下代码:

var dom = jqObjget(1); // 获取jQuery对象中下标为1的DOM对象

然后变量dom就和之前的变量dom一样,可以使用DOM对象的属性和方法了。

但是,我们不能写下面的代码,否则它就会报异常:

jqObjstylecolor = 'red';

因为jQuery对象的实例,根本就没有style这个属性。jQuery也是一样的,jQuery对象和DOM对象是两种不同的对象,它们的内部结构(比如上面的get方法是自定义的)也是不同的。当你把jQuery对象当做DOM对象使用时,你调用该对象的任何属性和方法,都有可能触发一个属性或方法未定义的异常,因为这个属性或方法确实不存在。

所以,如果你使用了jQuery库,那你就得在 *** 作节点的时候,注意区分这个节点对象到底是DOM对象,还是jQuery对象。基本上jQuery的方法如果返回节点对象,返回值大多是jQuery对象,但也有例外,比如get等。

回到你的题目,通过jQuery获取的canvas对象,实际上是jQuery对象封装后的对象。它没有getContext方法,所以会报错。但jQuery对象可以像访问数组一样,通过中括号来获取对应的DOM对象,所以第二种返回了最原始的Canvas对象,它是具有getContext方法的。

public class BinaryTree<E> //二叉树类

{

protected BinaryNode<E> root; //根结点

public BinaryTree() //构造空二叉树

{

root=null;

}

public BinaryTree(BinaryNode<E> root) //构造指定根结点的二叉树

{

thisroot=root;

}

public boolean isEmpty() //判断是否空二叉树

{

return thisroot==null;

}

public BinaryNode<E> getRoot() //返回二叉树的根结点

{

return thisroot;

}

//633 二叉树的遍历

public void preOrder() //先根次序遍历二叉树

{

Systemoutprint("\n先根序列: ");

preOrder(root);

}

private void preOrder(BinaryNode<E> p) //先根次序遍历以p结点为根的子二叉树

{

if(p!=null) //若二叉树不空

{

Systemoutprint(pdata+" "); //访问当前结点

preOrder(pleft); //按先根次序遍历当前结点的左子树

preOrder(pright); //按先根次序遍历当前结点的右子树

}

}

public void inOrder() //中根次序遍历二叉树

{

Systemoutprint("\n中根序列: ");

inOrder(root);

}

private void inOrder(BinaryNode<E> p) //中根次序遍历以p结点为根的子二叉树

{

if (p!=null)

{

inOrder(pleft); //中根次序遍历左子树

Systemoutprint(pdata+" ");

inOrder(pright); //中根次序遍历右子树

}

}

public void postOrder() //后根次序遍历二叉树

{

Systemoutprint("\n后根序列: ");

postOrder(root);

}

private void postOrder(BinaryNode<E> p) //后根次序遍历以p结点为根的子二叉树

{

if (p!=null)

{

postOrder(pleft);

postOrder(pright);

Systemoutprint(pdata+" ");

}

}

//例61 构造并遍历二叉树。

//3 基于遍历的 *** 作

public int count() //求一棵二叉树中所有结点个数

{

return count(root);

}

public int count(BinaryNode<E> p) //求以p结点为根的子树的结点个数

{

if (p!=null)

return 1+count(pleft)+count(pright);

else

return 0;

}

public int depth() //求二叉树的深度

{

return depth(root);

}

public int depth(BinaryNode<E> p) //求以p结点为根的子树的深度,后根次序遍历

{

if (p!=null)

{

int ld = depth(pleft); //求左子树的深度

int rd = depth(pright);

return (ld>=rd) ld+1 : rd+1;

}

return 0;

}

public BinaryNode<E> search(E value) //查找值为value的结点

{

return search(root, value);

}

public BinaryNode<E> search(BinaryNode<E> p, E value) //在以p为根的子树中查找值为value的结点

{ //先根次序遍历,返回查找到结点,若未找到返回null

BinaryNode<E> find=null; //记载找到结点

if (p!=null && value!=null)

{

if (pdataequals(value))

find = p; //查找成功

else

{

find = search(pleft, value); //在左子树中查找

if (find==null)

find=search(pright, value); //若左子树中未找到,则继续在右子树中查找

}

}

return find; //返回找到结点

}

public BinaryNode<E> getParent(BinaryNode<E> node) //返回指定结点node的父母结点

{ //若空树、未找到或node为根,返回null

if (root==null || node==null || node==root)

return null;

return getParent(root, node);

}

public BinaryNode<E> getParent(BinaryNode<E> p, BinaryNode<E> node)

{ //在以p为根的子树中查找并返回node结点的父母结点

BinaryNode<E> find=null; //记载找到结点

if (p!=null)

{

if (pleft==node || pright==node)

find = p; //查找成功

else

{

find = getParent(pleft, node); //在左子树中查找

if (find==null)

find = getParent(pright, node); //若左子树中未找到,则继续在右子树中查找

}

}

return find; //返回找到的父母结点

}

//634 构造二叉树

// 1、以先根、中根次序遍历序列建立二叉树

public BinaryTree(String prestr,String instr) //1、以先根、中根次序遍历序列建立二叉树

{

root=create(prestr,instr);

//root=create2(prestr,instr);

}

public BinaryNode create(String prestr, String instr)

{

BinaryNode<String> p=null;

int k,n;

String first,presub,insub;

n=prestrlength();

if(n>0)

{

Systemoutprint("prestr="+prestr+"\t instr="+instr);

first=prestrsubstring(0,1);

p=new BinaryNode<String>(first);

k=instrindexOf(first);

Systemoutprintln("\t first="+first+"\t k="+k);

presub=prestrsubstring(1,k+1);

insub=instrsubstring(0,k);

pleft=create(presub,insub);

presub=prestrsubstring(k+1,n);

insub=instrsubstring(k+1,n);

pright=create(presub,insub);

}

return p;

}

public BinaryNode create2(String instr, String poststr) //以中根、后根次序遍历序列建立二叉树

{

BinaryNode<String> p=null;

int k,n;

String last,postsub,insub;

n=poststrlength();

if(n>0)

{

Systemoutprint("instr="+instr+"\t poststr="+poststr);

last=poststrsubstring(poststrlength()-1,poststrlength());

p=new BinaryNode<String>(last);

k=instrindexOf(last);

Systemoutprintln("\t last="+last+"\t k="+k);

postsub=poststrsubstring(0,k);

insub=instrsubstring(0,k);

pleft=create2(insub,postsub);

postsub=poststrsubstring(k,n-1);

insub=instrsubstring(k+1,n);

pright=create2(insub,postsub);

}

return p;

}

// 2、以标明空子树的先根序列构造一棵二叉树

public BinaryTree(E[] preorder) //2、以标明空子树的先根序列构造一棵二叉树

{

root=create(preorder);

}

private int i=0;

private BinaryNode<E> create(E[] preorder) //创建一棵子树,当前结点值是preorder[i]

{ //返回所创建子树的根结点

BinaryNode<E> p = null;

if (i<preorderlength)

{

E elem=preorder[i];

i++;

if (elem!=null)

{

p = new BinaryNode<E>(elem); //建立p结点

pleft = create(preorder); //建立p的左子树

pright = create(preorder); //建立p的右子树

}

}

return p;

}

// 3、以广义表表示建立二叉树

public BinaryTree(String GenListStr)

{

Systemoutprintln("GenListStr="+GenListStr);

if(GenListStrlength()>0)

root=create(GenListStr); //以GenListStr的全部元素建立一棵二叉树

}

public BinaryNode create(String GenListStr) //以GenListStr的部分元素(从i开始)建立一棵子树

{

BinaryNode p=null;

char ch=GenListStrcharAt(i);

if(ch>='A' && ch<='Z') //大写字母

{

p=new BinaryNode<String>(ch+""); //建立结点

i++; //跳过大写字母

ch=GenListStrcharAt(i);

if(ch=='(')

{

i++; //跳过(

pleft=create(GenListStr); //建立左子树

i++; //跳过#

pright=create(GenListStr); //建立右子树

i++; //跳过)

}

}

if(ch=='#')

i++; //跳过#

return p; //ch非大写字母时,返回null

}

//例62 输出二叉树中指定结点的所有祖先结点。

//635 二叉树的插入和删除 *** 作

public void insert(BinaryNode<E> p, E element, boolean leftChild) //插入元素element作为p结点的孩子

{ //若leftChild为true,插入结点作为左孩子,否则作为右孩子

if (p!=null)

{

BinaryNode<E> q = new BinaryNode<E>(element);

if (leftChild)

{

qleft = pleft; //p结点的原左孩子成为q结点的左孩子

pleft = q; //q结点作为p结点的左孩子

}

else

{

qright = pright; //p结点的原右孩子成为q结点的右孩子

pright = q; //q结点作为p结点的右孩子

}

}

}

public void insert(BinaryNode<E> p, E element) //插入元素element作为p结点的左孩子

{

insert(p, element, true);

}

public void remove(BinaryNode<E> p, boolean leftChild) //删除p结点的左/右子树

{ //若leftChild为true,删除左子树,否则删除右子树

if (p!=null)

{

if (leftChild)

pleft = null;

else

pright = null;

}

}

public void remove(BinaryNode<E> p) //删除p结点的左子树

{

remove(p, true);

}

//636 二叉树遍历的非递归算法

public void preOrderTraverse() //先根次序遍历二叉树的非递归算法

{

Systemoutprint("先根次序遍历(非递归): ");

LinkedStack<BinaryNode<E>> stack = new LinkedStack<BinaryNode<E>>(); //创建一个空栈

BinaryNode<E> p = thisroot;

while(p!=null || !stackisEmpty()) //p非空或栈非空时

if(p!=null)

{

Systemoutprint(pdata+" "); //访问结点

stackpush(p); //p结点入栈

p=pleft; //进入左子树

}

else //p为空且栈非空时

{

p=stackpop(); //p指向出栈结点

p=pright; //进入右子树

}

Systemoutprintln();

}

public void inOrderTraverse() //中根次序遍历二叉树的非递归算法

{

Systemoutprint("中根次序遍历(非递归): ");

LinkedStack<BinaryNode<E>> stack = new LinkedStack<BinaryNode<E>>(); //创建一个空栈

BinaryNode<E> p = thisroot;

while(p!=null || !stackisEmpty()) //p非空或栈非空时

if(p!=null)

{

stackpush(p); //p结点入栈

p=pleft; //进入左子树

}

else //p为空且栈非空时

{

p=stackpop(); //p指向出栈结点

Systemoutprint(pdata+" "); //访问结点

p=pright; //进入右子树

}

Systemoutprintln();

}

//后根次序未写

//637 二叉树的层次遍历

public void levelOrder() //按层次遍历二叉树

{

LinkedQueue<BinaryNode<E>> que=new LinkedQueue<BinaryNode<E>>(); //创建一个空队列

BinaryNode<E> p=thisroot;

Systemoutprint("层次遍历: ");

while(p!=null)

{

Systemoutprint(pdata+ " ");

if(pleft!=null)

queenqueue(pleft); //p的左孩子结点入队

if(pright!=null)

queenqueue(pright); //p的右孩子结点入队

p = quedequeue(); //p指向出队结点

}

Systemoutprintln();

}

//第6章习题

public void leaf() //遍历输出叶子结点

{

leaf(root);

}

private void leaf(BinaryNode<E> p) //先根次序遍历,输出叶子结点,3种遍历次序结果一样

{

if(p!=null)

{

if (pisLeaf())

Systemoutprint(pdata+" ");

leaf(pleft);

leaf(pright);

}

}

public int countLeaf() //求一棵二叉树中所有叶子结点个数

{

return countLeaf(root);

}

private int countLeaf(BinaryNode<E> p) //求以p结点为根的子树的叶子结点个数

{

if (p==null)

return 0;

if (pisLeaf())

return 1;

return countLeaf(pleft)+countLeaf(pright);

}

public BinaryTree(BinaryTree<E> bitree) //以已知的bitree构造二叉树

{

thisroot = copy(bitreeroot);

}

private BinaryNode<E> copy(BinaryNode<E> p) //复制以p根的子二叉树

{

BinaryNode<E> q = null;

if(p!=null)

{

q = new BinaryNode<E>(pdata);

qleft = copy(pleft); //复制左子树

qright = copy(pright); //复制右子树

}

return q; //返回建立子树的根结点

}

public boolean equals(Object obj) //比较两棵二叉树是否相等

{

if (obj == this)

return true;

if (obj instanceof BinaryTree)

{

BinaryTree<E> bitree = (BinaryTree)obj;

return equals(thisroot, bitreeroot);

}

return false;

}

private boolean equals(BinaryNode<E> p, BinaryNode<E> q) //判断以p和q结点为根的两棵子树是否相等

{ //递归方法

if(p==null && q==null)

return true;

if(p!=null && q!=null)

return (pdataequals(qdata)) && equals(pleft, qleft) && equals(pright, qright);

return false;

}

public boolean replace(E old, E value) //将首次出现的值为old结点值替换为value

{

BinaryNode<E> find=search(old); //查找值为old的结点

if(find!=null)

finddata = value; //替换结点元素值

return find!=null;

}

public void replaceAll(E old, E value) //将值为old的结点全部替换为value

{

replaceAll(root, old, value);

}

private void replaceAll(BinaryNode<E> p, E old, E value) //在以p为根的子树中实现全部替换

{

if(p!=null)

{

if(pdataequals(old))

pdata = value;

replaceAll(pleft, old, value);

replaceAll(pright, old, value);

}

}

public static void main(String args[])

{

String[] preorder = {"A","B","D",null,"G",null,null,null,"C","E",null,null,"F","H"};

BinaryTree<String> bitree = new BinaryTree<String>(preorder);

preorder[0]="Z";

bitreepreOrder();

bitreeinOrder();

bitreepostOrder();

Systemoutprintln("\n结点个数: "+bitreecount());

Systemoutprintln("高度: "+bitreedepth());

Systemoutprint("叶子结点: ");

bitreeleaf();

Systemoutprintln(" , 共"+bitreecountLeaf()+"个");

BinaryTree<String> bitree2 = new BinaryTree<String>(bitree);

Systemoutprintln("两棵二叉树相等 "+bitreeequals(bitree2));

Systemoutprintln("第2棵二叉树替换(\"D\",\"F\"): "+bitree2replace("D","F"));

Systemoutprintln("两棵二叉树相等 "+bitreeequals(bitree2));

Systemoutprintln("第2棵二叉树全部替换(\"F\",\"Y\") ");

bitree2replaceAll("F","Y");

bitree2preOrder();

BinaryNode<String> find = bitreesearch("D"); //查找

bitreeinsert(find, "Z");

Systemoutprintln("插入Z作为 "+finddata+" 的左孩子\n");

bitreelevelOrder();

bitreepreOrderTraverse();

bitreeinOrderTraverse();

String[] preorder2 = {"A","B",null,null,"C"}; //标明空子树的先根序列

BinaryTree<String> bitree3 = new BinaryTree<String>(preorder2);

bitree3preOrder();

bitree3inOrder();

bitree3postOrder();

/

BinaryTree<String> bitree4 = new BinaryTree<String>(preorder2);

bitree4root = bitree4create(preorder2); //错,i越界,私有化可避免问题

bitree4preOrder();

/

String[] preorder3 = {"D","B","A",null,null,"C",null,null,"E"}; //二叉排序树

BinaryTree<String> bitree5 = new BinaryTree<String>(preorder3);

bitree5inOrder();

Systemoutprintln("\n二叉排序树 "+bitree5isSorted());

}

//第8章习题

public boolean isSorted() //判断一棵二叉树是否为二叉排序树

{

return isSorted(thisroot);

}

public boolean isSorted(BinaryNode<E> p)

{

boolean yes = true;

if (p!=null)

{

if (!(pdata instanceof Comparable))

return false;

Comparable cmpobj = (Comparable)pdata;

if ((pleft==null || pleft!=null && cmpobjcompareTo(pleftdata)>0) &&

(pright==null || pright!=null && cmpobjcompareTo(prightdata)<0))

{

yes = isSorted(pleft);

if (yes)

yes = isSorted(pright);

}

else

yes = false;

}

return yes;

}

}

/

程序运行结果如下:

先根序列: A B D G C E F H

中根序列: D G B A E C H F

后根序列: G D B E H F C A

结点个数: 8

高度: 4

叶子结点: G E H , 共3个

两棵二叉树相等 true

第2棵二叉树替换("D","F"): true

两棵二叉树相等 false

第2棵二叉树全部替换("F","Y")

先根序列: A B Y G C E Y H

第1棵二叉树查找: D

层次遍历: A B C D E F Z G H

先根次序遍历(非递归): A B D Z G C E F H

中根次序遍历(非递归): Z D G B A E C H F

先根序列: A B D G C E F H

中根序列: D G B A E C H F

后根序列: G D B E H F C A

中根序列: A B C D E

二叉排序树 true

/

这是二叉树的所有方法 及实现实例

还有就是需要建立节点类 你应该知道怎么建的吧

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。

由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。

所以在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。当用户打开浏览器访问mailhtml的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过locationhash获得B的高度。(location是javascript里边管理地址栏的内置对象,比如locationhref就管理页面的url,用locationhref=url就可以直接将页面重定向url。而locationhash则可以用来获取或设置页面的标签值。比如>

关键代码:

iframe主页面:mainhtml

<iframe id="iframeB"  name="iframeB" src=">

iframe嵌套页面:Bhtml

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe> 

<script type="text/javascript">

function sethash(){

hashH = documentdocumentElementscrollHeight; //获取自身高度

urlC = ">

中介页面:Ahtml

<script>

function pseth() {

var iObj = parentparentdocumentgetElementByIdx_x_x_x('iframeB');//A和main同域,所以可以访问节点

iObjH = parentparentframes["iframeB"]frames["iframeA"]locationhash;//访问自己的location对象获取hash值

iObjstyleheight = iObjHsplit("#")[1]+"px";// *** 作dom

}

pseth();

</script>

同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并 *** 作其父窗口main的dom属性即可。

以上就是关于js中提到的dom引用是什么意思全部的内容,包括:js中提到的dom引用是什么意思、急!二叉树的存储结构,并完成:建立、查找、计算结点数、求高度、三种遍历方式、如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9740411.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存