mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)

<!DOCTYPE html>
<html>

&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no&quot; /&gt;&lt;title&gt;&lt;/title&gt;&lt;script src=&quot;js/mui.min.js&quot;&gt;&lt;/script&gt;&lt;link href=&quot;css/mui.min.css&quot; rel=&quot;stylesheet&quot; /&gt;

&lt;/head&gt;

&lt;body&gt;&lt;div id=&quot;div1&quot;&gt;div1&lt;/div&gt;&lt;div id=&quot;div&quot;&gt;div2&lt;/div&gt;&lt;div id=&quot;div2&quot; class=&quot;nw1&quot;&gt;div3&lt;/div&gt;&lt;input type=&quot;button&quot; name=&quot;text&quot; id=&quot;&quot; value=&quot;666&quot; /&gt;&lt;script src=&quot;js/mui.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;console.log(mui(‘div‘)[0].innerHTML);//mui做dom操作必须先加【0】转为dom元素console.log(mui(‘input‘)[0].value);//mui括号里的可以是id、标签、class属性//getartvar lui=mui(‘input‘)[0];//mui方式获取input对象console.log(lui.attributes.type.nodeValue);//获取input标签的type属性值console.log(lui.attributes[‘name‘].nodeValue);//另一种获取input标签的name属性值console.log(document.getElementById(‘div‘).innerHTML);//这里是js的方法var nw=document.getElementById(‘div2‘);nw.setAttribute(‘demo‘,‘demo1‘);//设置自定义属性和值console.log(nw.attributes[‘demo‘].nodeValue);var nw1=document.getElementsByClassName(‘nw1‘)[0].innerHTML;console.log(nw1);(function($){//这里是在闭包里使用mui获取元素console.log($(‘div‘)[0].innerHTML);})(mui);&lt;/script&gt;&lt;/body&gt;
时间: 2024-10-20 09:42:09

mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)的相关文章

跟随标准与Webkit源码探究DOM -- 获取元素之querySelector,querySelectorAll

使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentFragment和Element追加了querySelector和querySelctorAll,原型为Element? querySelector(DOMString selectors)和 NodeList querySelectorAll(DOMString selectors),说明了匹配的算

跟随标准与Webkit源码探究DOM -- 获取元素之getElementById

按照ID获取元素 -- getElementById 标准 DOM 1,定义在HTMLDocument Interface 中,原型Element getElementById(in DOMString elementId),当不存在拥有对应ID的元素时返回null,该方法不会抛出任何异常. DOM 2,移动到了Document(原HTMLDocument的Parent Interface),原型不变. DOM 3 特别声明浏览器应当使用Attr.isId判断 Attr 是否为 ID,同时加了一

跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByTagName

按照标签名获取元素 -- getElementsByTagName 标准 DOM 1在Element和Document两个interface中均有定义,原型NodeList getElementsByTagName(in DOMString tagname),指明按照先序遍历遇到的顺序排列,不会抛出任何异常,参数"*"返回对应document或者element下所有元素.注意这里指明返回的是一个live的仅含有Element的NodeList. DOM 2里定义仍在Element和Do

跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByClassName

按照类名获取元素 -- getElementsByClassName(HTML5) 标准 WHATWG 在Document与Element上均有定义,原型 HTMLCollection getElementsByClassName(DOMString classNames),并定义了匹配算法和类名的提取算法,注意这里是先从参数里提取出类名作为一个set,然后再开始匹配的.其中指明了在quirks mode下类名大小写不敏感,否则大小写敏感 DOM 4(Document,Element )基本和W

【2017-3-30】DOM获取元素 点击、鼠标移入、移出事件 样式控制

1.获取标记对象 + document.getElementById('id'):                        - 获取一个对象 + document.getElementsByClassName('class');      - 获取的是一个数组 + document.getElementsByTagName('标记');          - 获取的也是一个数组 + document.getElementsByName('name');             - 获取的也

跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByName

按照name属性获取多元素 -- getElementsByName 标准 DOM 1 定义在HTMLDocument Interface 中,原型NodeList getElementsByName(in DOMString elementName),该方法不会抛出任何异常. DOM 2依然定义在HTMLDocument,原型不变,但是新增说明在 HTML4.0 里搜索范围为所有元素,而 XHTML 1.0 里搜索范围缩小到表单元素 DOM 3没有 DOM HTML 的标准,沿袭 DOM 2(

js学习笔记(三)DOM获取元素

1. getElementById操作示例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Shopping list</title> </head> <body> <h1>What to buy&l

Web-Lesson05-初识JavaScript:获取元素 事件

JavaScript:是一种脚本语言,动态类型.弱类型.通常用来操作HTML页面(HTML是骨架结构,CSS是样式装饰,JS是行为交互) 弱类型的体现: 一.JavaScript书写格式     1.Js代码写在哪里 1.JavaScript标签里. 2.写在外部.js后缀文件里,通过script标签引入(引入.js文件的script标签里,一定不能再写js代码,标签里写js代码一般情况不推荐) 2.script标签写在哪里 1.head里 2.body里(如果没有特殊要求,一般script标签

document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,   尤其是 document.getElementById 和 document.getElementsByClassName,   看看下面截图,用上面2种方法获取到元素并添加点击事件后,控制台会打印出什么呢? 可能有小伙伴晃眼一看,这么简单,不就是 1和2 吗,真的是这样吗?下面看看控制台的打印截图  结果是只打出了1,为什么没有打印出2呢?   现在我们把2种获取DOM的方法打印出来,如下截图, console.log(