据说每个大牛、小牛都应该有自己的库——DOM处理续

简介:

在上篇据说每个大牛、小牛都应该有自己的库——DOM处理最后剩下attr()和css()方法没有处理,因为这两个方法当时并不自计划中,是写着写着突然想到的,一时间没有特别好的思路,当时已十一点多了,就去睡了。没想到啊没想到接下来的一星期简直是噩梦,每天加班回家都十一点,今天有时间赶紧补上。

property与attribute

之前说了这两个方法是仿照jQuery的,看了一下jQuery的源码,发现从1.6后jQuery多了一个prop()方法,做的功能却和attr()很相似,看了很多资料才明白prop是在解决什么问题。

property和attribute都可以翻译为属性,不过为了区别一般把property翻译为特性,而在JavaScript中,property和attribute的区别不止这么简单。setAttribute是为DOM节点设置/添加属性的标准方法,我们一般会这么用

var e = document.getElementById('ck');
        e.setAttribute('title', 'test');

也可以这么用

var e = document.getElementById('ck');
        e.title = 'test';

无论怎么设,在读取的时候这么用

alert(e.getAttribute('title'));
        alert(e.title);

对attribute设定/读取值使用setAttribute/getAttribute,property使用.操作符,两种用法看似毫无区别,但是我们也经常设置元素的class,想要得到预期结果得这么写

e.setAttribute('class', 'test');
        e.className = 'test';

同样都是对class操作,使用attribute的key是class,property却是className,其读取的结果也不一定相同(input 的checkbox)

console.log(e.getAttribute('checked')); //checked
console.log(e.checked); //true

DOM对象大部分的内置property都有对应的名字的attribute(名字也可能不同,比如上面的class),对于自定义的属性双发互不干扰(IE9以下版本还是共享的)

e.setAttribute('customizeProperty', 'attribute');
        e.customizeProperty = 'property';
        console.log(e.getAttribute('customizeProperty')); //attribute 
        console.log(e.customizeProperty); //property

image

看起来似乎很清楚了,看个例子

复制代码
<input id="ck" type="checkbox" checked="checked" />
    <script type="text/javascript">
        var e = document.getElementById('ck');
        
        console.log(e.getAttribute('checked')); //checked
        console.log(e.checked); //true

        e.checked = false;
        console.log(e.getAttribute('checked')); //checked
        console.log(e.checked); //false

        e.setAttribute('checked', 'checked');
        console.log(e.getAttribute('checked')); //checked
        console.log(e.checked); //false

</script>
复制代码

这是怎么个情况,不是内置属性是共享的吗,怎么互不干扰了?这是因为一些Boolean类型的属性(如checked, selected, disabled等)比较特殊,其attribute只保留初始值(默认值), property才是当前最新的状态值。一个默认勾选的checkbox,当在页面去除勾选的时候,checked这个property已由true变为false,而checked这个attribute仍然保持“checked”这个初始值。

attr()

这都和attr()有神马关系,说上面的原因是既然了解了property和attribute的不同,那么自己的库干脆也像jQuery把property和attribute分开处理。自己写了很多,总是有这样那样的问题,看到了大神John Resig的处理方法后,豁然开朗,这两个方法是可以写成结合体的,无耻的简单改造了一下抄过来,注释写的都这么经典没舍得删

复制代码
attr: function (elem, name, value) {
                    // Are we setting a value?
                    if (typeof name == 'object') {
                        for (n in name) {
                            attr(elem, n, name[n]);
                        }
                    }
                    else if (value !== undefined) {
                        // Make sure the element has the ability to set an attribute
                        if (typeof elem.setAttribute !== "undefined") {
                            // If the user is setting the value to false
                            if (value === false) {
                                // Completely remove the attribute
                                elem.removeAttribute(name);

                                // Otherwise set the attribute value
                            } else {
                                // If the user is setting the value to true,
                                // Set it equal to the name of the attribute
                                // (handles boolean attributes nicely)
                                elem.setAttribute(name, value === true ? name : value);
                            }

                            // If it doesn't, then we're likely dealing with window or document
                            // (or some other object entirely)
                        } else {
                            elem[name] = value;
                        }

                        // Otherwise we're getting an attribute value
                        // Check to see if the appropriate method exists
                        // Also don't use getAttribute if a boolean property exists
                    } else if (typeof elem.getAttribute !== "undefined" && typeof elem[name] !== "boolean") {
                        return elem.getAttribute(name);

                        // If no getAttribute method is present, or if we
                        // wish to access the boolean property instead of the
                        // attribute, then we fallback to the DOM object property
                    } else {
                        return elem[name];
                    }
                }
复制代码

css()

css()方法就写不了jQuery那么强大了,基本没有做错误处理,所以使用的时候必须保证传入的属性名称和值是正确的,同时只能传入简单的属性名,而不能是-moz-等类似的

复制代码
css:function(ele,name,value){
                    if(typeof name=='object'){
                        for(n in name){
                            ssLib.css(ele,n,name[n]);
                        }
                    }else if(typeof value!='undefined'){
                        ele.style[_parseStyleName(name)]=value;
                    }else{
                        return   ele.style[_parseStyleName(name)];
                    }
                }

    本文转自魏琼东博客园博客,原文链接: http://www.cnblogs.com/dolphinX/p/3321401.html ,如需转载请自行联系原作者

相关文章
|
6月前
|
数据采集 JavaScript 小程序
laravel8(四)使用simple_html_dom库解析html
首先:simple_html_dom下载地址: github.com/samacs/simp… 这是一个PHP解析html的一个库。 这玩意还是很有用的,比如我们在使用PHP做爬虫的时候,需要解析html中的内容等。 他的强大之处不仅仅只是帮助我们验证html文档;更能解析不符合W3C标准的html文档。 关于如何引入第三方类库,请移步《laravel5.8(十)引入第三方类库》laravel8中的设置方法也大同小异。 一:加载 html 有三种方式调用这个类: 1. 从url中加载html文档 2. 从字符串中加载html文档 3. 从文件中加载html文档
69 1
|
1月前
|
XML JavaScript 数据格式
Beautiful Soup 库的工作原理基于解析器和 DOM(文档对象模型)树的概念
【5月更文挑战第10天】Beautiful Soup 使用解析器(如 html.parser, lxml, html5lib)解析HTML/XML文档,构建DOM树。它提供方法查询和操作DOM,如find(), find_all()查找元素,get_text(), get()提取信息。还能修改DOM,添加、修改或删除元素,并通过prettify()输出格式化字符串。它是处理网页数据的利器,尤其在处理不规则结构时。
43 2
|
1月前
|
数据采集 存储 JavaScript
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
本文旨在介绍如何利用PHP中的simple_html_dom库结合爬虫代理IP技术来高效采集和分析汽车之家网站的电动车参数。通过实际示例和详细说明,读者将了解如何实现数据分析和爬虫技术的结合应用,从而更好地理解和应用相关技术。
PHP爬虫技术:利用simple_html_dom库分析汽车之家电动车参数
|
6月前
|
数据采集 监控 JavaScript
巧用简单工具:PHP使用simple_html_dom库助你轻松爬取JD.com
本文将介绍如何使用PHP语言和一个简单的第三方库simple_html_dom来爬取JD.com的商品信息。simple_html_dom是一个轻量级的HTML解析器,它可以方便地从HTML文档中提取元素和属性,而无需使用正则表达式或DOM操作。本文将通过一个实例来展示如何使用simple_html_dom库来爬取JD.com的商品名称、价格、评分和评论数,并将结果保存到CSV文件中。本文还将介绍如何使用代理IP技术来避免被目标网站封禁或限制。
巧用简单工具:PHP使用simple_html_dom库助你轻松爬取JD.com
|
JavaScript 数据安全/隐私保护
手把手写一个vue3的组件库,在指定dom中生成水印
本次手把手记录的是一个vue3的给dom生成水印的指令,这里把他封装成一个组件,下一次直接拉下来就可以使用。这个可以用在移动端或者是pc端上防止数据被人截屏。效果如下:
手把手写一个vue3的组件库,在指定dom中生成水印
|
JavaScript 算法 前端开发
手写一个虚拟DOM库,彻底让你理解diff算法
手写一个虚拟DOM库,彻底让你理解diff算法
223 0
手写一个虚拟DOM库,彻底让你理解diff算法
|
JavaScript 算法 前端开发
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
Virtual DOM到底有什么迷人之处?如何搭建一款迷你版Virtual DOM库?
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
8天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
8天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
11 2