javascript转变字符串为dom对象(字符串动态创立dom)

by admin on 2019年9月6日

前言:
在javascript里面动态创建标准dom对象一般使用:
var obj = document.createElement(‘div’);
然后再给obj设置一些属性。
但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了
伪代码:var obj=strToDom(‘<div id=”div_1″ class=”div1″>Hello
World!</div>’);
那么今天的目的就是教大家怎么去实现一个这样的方法用来把字符串直接转换为标准的dom对象

js  dom与字符串相互转换

jquery对象和javascript的dom对象转换,jquerydom

Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性。

Jquery对象和dom对象是可以相互转换的,因为他们所操作的对象都是dom元素,只不过jquery对象包含了多个dom元素,而dom对象本身就是一个dom元素,简单地说,jquery对象是dom元素的数组,称为类数组,而dom对象就是单个的dom元素。

1.把jquery对象转换成dom对象

(1)借助数组下标来读取jquery对象集合中的某个dom元素对象。

Var $li = $(‘li’);//jquery对象

Var li = $li[0];//dom对象

(2)借助jquery对象的get()方法

Var $li = $(‘li’);//jquery对象

Var li = $li.get(0);//dom对象

 

2.dom对象转换为jquery对象

Var li = document.getElementsByTagName(‘div’);

奥门威尼斯网址,Var $li = $(li[o]);//把第一个div元素封装为jquery对象

Var li = document.getElementsByTagName(‘div’);

Var $li = $(li);//把所以的div元素封装为jquery对象

Load事件必须等到网页中所以内容全部加载完毕后才执行。

当网页中内容很多时,load事件就会延迟

Jquery的ready事件是在dom结构绘制完毕后就执行,也就是说它在外部文件加载之前就执行了,ready事件先于load事件。

Load事件只能被编写一次,但是ready事件可以在同一个文档中多次定义。

 

<html>

<head>

 

</head>

<body>

<div class=”panel”/>wlecome</div>

<script type=”text/javascript” src=”jquery-1.5.1.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(‘<input type=”button” value=”click me” /><input type=”button” value=”triggle click me” /><input type=”button” value=”detach handler” /><input type=”button” value=”show/hide text” />’).appendTo($(‘body’));

$(‘input[type=”button”]’)

.eq(0).click(function(){

$(this).val(“红色”).addClass(‘red’); }).end().eq(1).click(function(){

alert(1);

}).end().eq(2).click(function(){

alert(2);

}).end().eq(3).toggle(function(){

$(‘.panel’).hide(‘slow’);

},function(){

$(‘.panel’).show(‘slow’);

}

 

);

});

</script>

</body>

<html/>

 

 

 

设计场景


  • 我们在写一个组件的时候,经常需要做的就是把 HTML代码
    以字符串的形式拼到脚本中,最后通过 ** appendChild()**
    方法把它追加到视图中的某个元素中

start: 其实实现这样的一个转换是很简单的,这里主要是利用了一个属性innerHTML.
innerHTML,我相信大家都使用过,特别是动态往一个元素里面插内容时使用,这里我还是在介绍下innerHTML,方便于还不太熟悉的人。
innerHTML不是w3c标准,是由ie发明创造出来的,但是由于这个属性的方便性,和当时微老大的地位,其它非ie浏览器也内置了innerHTML并给出了支持。
虽然innerHTML不是w3c标准,但是却是一个事实标准,这个事实标准很重要,也就是目前主流浏览器都支持innerHTML,自然就做到了兼容多浏览器。
code:

一.字符串转换dom:

DOM对象转成jQuery对象:

你这样写,意味着v是DOM对象,而$v是jquery对象,以后如果要调用,就使用$v。当然,$号不是必需的,你也可以用其他的变量名,如var
jq_obj=$(v)
 

问题


  • 该方法支持的参数类型为 DOM对象 ,而我们脚本中所写的类型是
    string
  • 错误提示

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

复制代码 代码如下:

function stringToDom(str){
 var obj=document.createElement(“div”);
 obj.innerHTML=args;
 return obj;
 }

怎将JQUERY对象转成Javascript对象

$(“#test”) //jQuery对象
$(“#test”)[0] //jQuery对象->原生的DOM对象
$($(“#test”)[0])
//DOM对象->jQuery对象(有点绕,但只要明白使用$()后能将原生的DOM对象封装成jQuery对象即可)
 

Jquery 框架为 jquery 对象定义了独立使用的方法和属性,它无法直接调用 dom
对象的方法, dom 对象…

解决方案


function parseDom(nodelist) {
  var objE = document.createElement("div");  
  objE.innerHTML = nodelist;
  return objE.childNodes;
}

function parseDom(arg) {
   var objE = document.createElement(“div”);
   objE.innerHTML = arg;
   return objE.childNodes;
};

二.dom转换字符串:

短短几行代码就实现了转换,我们首先用标准的方法创建一个div出来,在用innerHTML来插入一个元素,其实也就是利用浏览器自己的内核算法来实现的一个转换。在用childNodes返回出来。
这样我们就完成了一个字符串到标准dom的转换,巧妙的利用浏览器本身的算法,可以用简单少量的代码来完成大量复杂的转换,我们不用去解析字符串,而是交给浏览器自己来完成,这样既准确又无误。
使用:

function domToStirng(dom){
    if(dom in htmlDOM){
        return htmlDOM.outerHTML;
    } else {
        var div= document.createElement(“div”);
        div.appendChild(dom);
        return div.innerHTML
    }
 }

复制代码 代码如下:

var obj=parseDom(‘<div id=”div_1″ class=”div1″>Hello
World!</div>’);
var obj=parseDom(‘<div id=”div_1″ class=”div1″>Hello
World!</div><span>多个也没关系</span>’);

注意:
childNodes返回的是一个类似数组的list。所以如果是一个元素,要使用这个dom需要这样使用obj[0]。如果是多个同级的dom转换,可以这样使用obj[0]、obj[1]…
end

到这里就结束了,在这里向大家推荐一个我自己写的js框架,上面的这个方法集成在框架里面了
使用:b$.parseDom(‘<div id=”div_1″ class=”div1″>Hello
World!</div>’)

bBank 开源Javascript框架

在javascript里面动态创建标准dom对象一般使用: var obj =
document.createElement(‘div’); 然后再给obj设置一些属性。
但是,在实际使用过程中…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图