dom属性是什么呢

DOM全拼为DocumentObjectModel（文档对象模型）

是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

1、Zepto是为现代智能手机浏览器推出的Javascript框架,有和jQuery相似的语法,和jQuery相比下来,他有很多优点,大小方面,压缩后的zeptominjs大小只有21K,使用服务器端gzip压缩后大小只有5~10K,可以说非常的小,功能很齐全,多出来了一些触摸屏的事件,它对PC的浏览器就不是那么理想,尤其是万恶IE直接过滤不兼容,用它来开发手机iPhone和Android网页是不错的选择\x0d\\x0d\2、jquery主要是用在PC的网页中了，jquery是目前最流行的javascript框架，以其兼容全部主流浏览器，插件丰富，代码简洁，最关键的是更新快，最好的dom选择器而被广泛被使用。而手机wap方面的话，jquery也推出jquery-mobile，也很好用。\x0d\\x0d\简单的理解就是：\x0d\Zepto手机专用\x0d\jQuery电脑专用（但他又开发出了jquery-mobile,专门用于手机）

js *** 作节点的DOM方法

一、创建节点

createElement

createTextNode

二、添加、删除、替换、克隆元素

1、appendChild

2、insertBefore

3、如果appendChild、insertBefore追加的是已经存在的子元素，实际上就会将子元素位置移动

4、删除节点remove removeChild

remove()

removeChild

5替换节点

replaceChild

6、克隆节点

cloneNode()

三、 *** 作元素属性的方法

1获取属性 元素属性名

2设置属性 元素属性名 = 属性值

1、2方法只能获取和设置元素自带的属性

3 *** 作属性的万能方法

getAttribute()

setAttribute()

1、针对移动端程序

zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），zepto是不支持IE浏览器的。

2、DOM *** 作的区别

添加id时jquery不会生效而zepto会生效。

3、事件触发的区别

使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行。

4、事件委托的区别

zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件。

5、js精简方面

zepto是jquery的精简，针对移动端去除了大量jquery的兼容代码。

6、其他方面

zepto中没有为原型定义extend方法而jquery有；zepto的each方法只能遍历数组，不能遍历JSON对象。

据统计 目前全世界 %的网站使用它 也就是说 个网站里面 有 个使用jQuery 如果只考察使用工具库的网站 这个比例就会上升到惊人的 %

虽然jQuery如此受欢迎 但是它臃肿的体积也让人头痛不已 jQuery 的原始大小为 KB 优化后为 KB 如果是支持IE 的jQuery 原始大小为 KB 优化后为 KB

这样的体积 即使是宽带环境 完全加载也需要 秒或更长 更不要说移动设备了 这意味着 如果你使用了jQuery 用户至少延迟 秒 才能看到网 页效果 考虑到本质上 jQuery只是一个 *** 作DOM的工具 我们不仅要问 如果只是为了几个网页特效 是否有必要动用这么大的库？

年 jQuery诞生的时候 主要用于消除不同浏览器的差异（主要是IE ） 为开发者提供一个简洁的统一接口 相比当时 如今的情况已经发生了很大的变化 IE的市场份额不断下降 以ECMAScript为基础的JavaScript标准语法 正得到越来越广泛的支持 开发者直接使用JavScript标准语法 就能同时在各大浏览器运行 不再需要通过jQuery获取兼容性

下面就探讨如何用JavaScript标准语法 取代jQuery的一些主要功能 做到jQuery free

一 选取DOM元素

jQuery的核心是通过各种选择器 选中DOM元素 可以用querySelectorAll方法模拟这个功能

var $ = document querySelectorAll bind(document);

这里需要注意的是 querySelectorAll方法返回的是NodeList对象 它很像数组（有数字索引和length属性） 但不是数组 不能使用pop push等数组特有方法 如果有需要 可以考虑将Nodelist对象转为数组

myList = Array prototype slice call(myNodeList);

二 DOM *** 作

DOM本身就具有很丰富的 *** 作方法 可以取代jQuery提供的 *** 作方法

尾部追加DOM元素

// jQuery写法 $(parent) append($(child));

// DOM写法 parent appendChild(child)

头部插入DOM元素

// jQuery写法 $(parent) prepend($(child));

// DOM写法 parent insertBefore(child parent childNodes[ ])

删除DOM元素

// jQuery写法 $(child) remove()

// DOM写法 child parentNode removeChild(child)

三 事件的监听

jQuery的on方法 完全可以用addEventListener模拟

Element prototype on = Element prototype addEventListener;

为了使用方便 可以在NodeList对象上也部署这个方法

NodeList prototype on = function (event fn) { [][ forEach ] call(this function (el) { el on(event fn); }); return this; };

四 事件的触发

jQuery的trigger方法则需要单独部署 相对复杂一些

Element prototype trigger = function (type data) { var event = document createEvent( HTMLEvents ); event initEvent(type true true); event data = data || {}; event eventName = type; event target = this; this dispatchEvent(event); return this; };

在NodeList对象上也部署这个方法

NodeList prototype trigger = function (event) { [][ forEach ] call(this function (el) { el[ trigger ](event); }); return this; };

五 document ready

目前的最佳实践 是将JavaScript脚本文件都放在页面底部加载 这样的话 其实document ready方法（jQuery简写为$(function)）已经不必要了 因为等到运行的时候 DOM对象已经生成了

六 attr方法

jQuery使用attr方法 读写网页元素的属性

$("#picture") attr("src" "//url/to/image");

DOM元素允许直接读取属性值 写法要简洁许多

$("#picture") src = "//url/to/image";

需要注意 input元素的this value返回的是输入框中的值 链接元素的this href返回的是绝对URL 如果需要用到这两个网页 元素的属性准确值 可以用this getAttribute( value )和this getAttibute( href )

七 addClass方法

jQuery的addClass方法 用于为DOM元素添加一个class

$( body ) addClass( hasJS );

DOM元素本身有一个可读写的className属性 可以用来 *** 作class

document body className = hasJS ;

// or

document body className += hasJS ;

HTML 还提供一个classList对象 功能更强大（IE 不支持）

document body classList add( hasJS );

document body classList remove( hasJS );

document body classList toggle( hasJS );

document body classList contains( hasJS );

八 CSS

jQuery的css方法 用来设置网页元素的样式

$(node) css( "color" "red" );

DOM元素有一个style属性 可以直接 *** 作

element style color = "red";;

// or

element style cssText += color:red ;

九 数据储存

jQuery对象可以储存数据

$("body") data("foo" );

HTML 有一个dataset对象 也有类似的功能（IE 不支持） 不过只能保存字符串

element dataset user = JSON stringify(user);

element dataset score = score;

十 Ajax

jQuery的Ajax方法 用于异步 *** 作

$ ajax({ type: "POST" url: "some php" data: { name: "John" location: "Boston" } }) done(function( msg ) { alert( "Data Saved: " + msg ); });

我们可以定义一个request函数 模拟Ajax方法

function request(type url opts callback) {

var xhr = new XML>

在react中，我们已经知道，组件并不是真实的DOM节点，而是通过虚拟DOM渲染出来的节点，只有当它被插入到文档后，才成为了真实的DOM。

要从组件中获取真实的DOM节点，则可在jsx标签中加入ref属性

<script type="text/babel">

var Hello=ReactcreateClass({

showThis:function(){

//通过thisrefsusername拿取到了ref为username的元素节点

consolelog(thisrefsusernamevalue)

},

render:function(){

return (

<div>

<input type="text" ref="username" onChange={thisshowThis}/>

</div>

)

}

});

ReactDOMrender(

<Hello />,

documentgetElementById("box")

)

</script>

以上就是关于dom属性是什么呢全部的内容，包括:dom属性是什么呢、zepto和jquery的区别、js *** 作节点的DOM方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！