DOM扩展——笔记

最新推荐文章于 2024-09-13 17:29:38 发布
最新推荐文章于 2024-09-13 17:29:38 发布
阅读量557 收藏
点赞数
分类专栏： javascript 文章标签： dom 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yogo_t/article/details/43197515
版权
NodeList
    NodeList代表一个有顺序的节点列表
NamedNodeMap
    NamedNodeMap代表一个无顺序的节点列表
HTMLcollection
    HTMLCollection 是一个接口，表示  HTML （ 标准通用标记语言 下的一个应用） 元素的集合，它提供了可以遍历列表的方法和        属性。
    HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。
例如
    var divs=document.getElementsByTagname('div');     //取得所以div的 HTMLCollection；
    var i，div;
    for(i=0;i<divs.length;i++)
    {
        div=document.createElement('div');
        document.body.appendChild(div);
    }
*  这样会产生死循环，因为NodeList，NamedNodeMap，HTMLCollection三个对象在文档变化的时候也会跟着更新，因此divs.length在不断的变化，如果想要正常得迭代Nodelist的话应在刚开始就把divs.length初始化第二变量
    var divs=document.getElementsByTagName('div');
    var i,div,len;
    for(i=0,len=divs.length;i<len;i++)
    {
        div=document.createElement('div');
        document.body.appendChild(div);
    }




1.动态脚本
var script=document.createElement("script");
script.type="text/javascript";
script.appendChild(document.createTextNode("function syaHi(){alert(''hi);}"));
document.body.appendChild(script);
*动态添加脚本无法知道是否已经load；
*以上代码在IE无效,在IE浏览器，js代码必须用text属性添加
例如
function loadScriptString(code)
{
    var script=document.createElement("script");
    script.type="text/javascript";
    try
    {
        script.appendChild(document.createTextNode(code));
    }
    catch(e)
    {
         script.text=code;  //兼容IE
    }
    document.body.appendChild(script);
}
调用函数示例
loadScripgString("function sayHi(){alert('hi');}");

2.动态样式
function loadStyleString(css)
{
    var style=document.createElement('style');
    style.type="text/css";
    try
    {
        style.appendChild(document.createTextNode(css));     //SF FF CH
    }
    catch(e)
    {
        style.styleSheet.cssText=css;         //IE
    }
    var head=document.getElementsByTagName('head')[0];
    head.appendChild(style);
}

选择符API

querySelector()   
返回css选择符的第一个元素，没找到返回null

querySelectorAll()  
返回css选择符找到的nodelist，没找到返回空的nodelist

matchesSelector()
这个方法是Element类型新增方法，接收一个参数，如果调用元素与该选择符匹配，返回true，否则返回false
例如：
if(document.body.matchesSelector('body.page'))
{
    //true;
}

元素遍历
    对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器会放回文本节点，这样导致在使用childNodes和    firstChild等属性时的行为不一致，因此Element Traversal规范新定义了一组属性
    
    childElementCount：返回子元素（不包括文本节点和注释）的个数
    firstElementChild：指向第一个子元素：firstChild的元素版
    lastElementChidl：指向最后一个子元素：lastChild的元素版
    previousElementSibling：指向前一个同辈元素；previousSibling的元素版
    nextElementSibling：指向后一个同辈元素；nextSlibling的元素版


HTML5（DOM相关内容）
1.与类相关的扩充
    -getElementByClassName();  元素的类选择器，性能有优势。可传多个类名（‘class1 class2’），先后无影响
    -classList属性  对class进行添加，删除，是DOMTokenList的实例，有length属性，可以用item()跟[]取得对应的元素，还有以下方法
            -add(value)   添加给定字符串到列表，如果存在不添加
            -contains(value)   如果有value存在返回true
            -remove(value)   如果有value，移除
            -toggle(value)   如果列表有value，移除他，如果没有value，添加他。

2.焦点管理
    -document.activeElement属性 ，该属性始终会引用焦点元素
            例如：document.getElementById('mybutton').focus();
                      if(document.activeElement==button)   //true;
    -hasFocus()方法  确认文档是否获得焦点
 

3.HTMLDocument变化
    -document.readyState属性，新增。  返回loading是正在加载，返回complete是已经加载完 
    -document.head   直接引用<head>
            例如：var head=document.head || document.getElementsByTagName('head');
    -document.charset  字符集属性            //浏览器全部支持
    -defaultCharset  浏览器和系统默认的字符集设置   //FF 不支持
            例如  alert(document.charset);   //"utf-8"     document.charset="gbk13" 
                     if(document.charset==document.defaultCharset)
                    {
                            //true;
                    }
    -自定义数据属性  必须加data-，为了表示于元素渲染无关
            例如 <div id="mydiv"  data-num=1></div>
                    var div=document.getElementById('mydiv');
                    //获取自定义数据属性
                    var g=div.dataset.num;
                    //设置自定义数据属性
                    div.dataset.num=3;
                    //有没有num属性
                    if(div.dataset.num)  














牙膏00
关注
专栏目录
DOM学习笔记
kun的博客
11-20 471
DOM（文档对象模型，Document文档，Object对象，Model模型）        在开发中的地位和作用 1、解释下面名词    HTML XHTML DHTML XML：    HTML：超文本标记语言，专门编写网页内容的语言        --元素定义可大小写    XHTML：严格的HTML语言标准                                   ...
JavaScript之DOM扩展
但愿人长久 千里共婵娟
04-25 357
尽管现在DOM已经很完善了。但为了实现更多的功能，仍然会有一些标准或专有扩展被纳入W3C标准中。
11.DOM扩展——JavaScript高级程序设计(笔记)
艾小小雨的博客
08-27 172
00.querySelector()方法：接收一个CSS选择符，返回该模式匹配的第一个元素，如果没有找到匹配的元素，返回null.   01.querySelectAll()方法：一个CSS选择符，但返回的是所有匹配的元素二不仅仅是一个元素。这个方法返回的是一个NodeList的实例   02.元素遍历 　　Element Traversal API为DOM元素添加5个属性 　　　　*c...
DOM 扩展——JavaScript高级程序设计笔记（9）
Take pains, and be perfect
08-19 306
第十章 DOM扩展 选择符APIquerySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。 //取得body 元素 var body = document.querySelector("body"); //取得ID 为"myDiv"的元素 var myDiv = document.querySelector("#myDiv"
JavaScript 系列笔记——DOM（贰）
浮幻的博客
08-10 1404
JavaScript 系列笔记——DOM，确定不点进来瞧瞧？
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
笔记内容不仅与视频教程紧密同步，还融入了个人的理解和一些额外的扩展知识点，旨在帮助学习者更好地掌握前端开发的基本技能。 HTML（HyperText Markup Language）是网页制作的基础，它是用来构建网页结构的标记...
Html5——笔记一
Danny1076376440的博客
03-03 655
文章目录学习网址笔记HTML 基础元素HTML 属性HTML 标题HTML 文本格式化HTML 链接HTML headDOM 学习网址 https://www.w3school.com.cn/html5/html_5_audio.asp https://www.runoob.com/html/html-tutorial.html 笔记 HTML 基础元素 HTML 标题（Heading）是通过&l...
MLDN学习笔记 —— XML学习笔记
03-16
XML，全称Extensible Markup Language，可扩展标记语言，是一种用于标记数据的结构化语言，广泛应用于网络数据交换、配置文件、文档存储等领域。在IT行业中，理解和掌握XML是进行跨平台信息处理、Web服务开发以及...
chrome extension例子——选中文本笔记
04-17
`content_script.js`则是在网页上下文中运行的脚本，可以操作DOM，实现选取文本并记录笔记的功能。`popup.html`和`popup.js`是点击浏览器扩展图标时出现的弹出窗口，通常用于用户交互界面。 在开发这个"选中文本...
jquery扩展html5+canvas实现多张图片 预览 压缩 上传
牙膏 的专栏
01-23 4235
主要javascript代码 function img_remove(a) { var b = $(a).prev().attr("idnum"); $(a).parent().remove(), $("#f_" + b).remove(), console.log("asdf") } ! function(a) { function b(b, c, d, e, f) { var
简单暴力的禁止html页面滚动的方法
牙膏 的专栏
03-18 4034
在html页面  弹出弹窗的时候总是给一个问题烦到，就是页面还是可以滚动，虽然弹出的div是没变。 解决方法就是：移动端：在弹窗的时候 禁止 ontouchmove，给preventdefault()；     pc端：在弹窗的时候 禁止鼠标滚动 onmousewheel,给preventdefault(); 当弹出隐藏的时候，恢复事件的默认动作就可以了。
做完一个“html嵌套到原生页面”项目后的一个整理
牙膏 的专栏
05-21 1254
js与原生交互文件base.js注意： 1.pub.agr.detaUlr这个数组必传 2.setDetaurl() 这个函数在base.js在加载的完就要执行，才能避免有时候有时出现变量不存在的原因 3.pub 公共对象定义的原因在于“减少全局变量污染”，所以在要用到公共变量的时候，可以在pub对象里面定义属性或者扩展对象 4.新建一个 likeNative.js 里面定义要接口，该文件用来模拟
javascript与原生的交互小知识
牙膏 的专栏
03-05 870
以上是 移动端跟html页面交互的一个做法；那么在前端这方面需要做些什么呢？ 1.统一定义好“接口名”（例如：Js_Interactive），在html中调用原生方法的方式： `window.Js_Interactive.method();` *在前期移动端未能配合测试的时候，可以自己定义一个Js_Interactive对象来测试交互效果有没有问题。 2.定义方法名 -定义原生调用js的函数名，这里只要命名符合
js时间间隔和倒计时
牙膏 的专栏
08-03 791
var commom={}; commom.interval=function(timestr) { var timestr=countTime(timestr); if(timestr>=0) { if (sencond_dif < 60) { time_str = "刚刚"; } else if (sencon
js、ios交互的一点小问题
牙膏 的专栏
02-28 687
第一次接触 这 所谓的 “混合开发” ，困难的地方在js 与 android ios交互这块 自己定义了一个接口文档给两个开发组，例如：接口名称：TestInteractive，js调用原生方法：test1(),  test2(str1); test1因为没参数，所以 android 跟ios 都没问题，都可以调用得到，但是test2(str1)是有参数的，android的定义跟js一样，参数
DOM 插入标记
牙膏 的专栏
01-29 628
插入标记     如果用createElement(),appendChild()这样一个一个的创建、添加元素的话是比较麻烦的，相对来说，使用插入标记技术，直接插入HTML标记字符串不仅简单而且快速，以下插入标记DOM扩展已经纳入到HTML5中。 1.innerHTML     -在读模式下，innerHTML会返回调用元素的所有子节点         例如:啦啦啦德玛西亚  
C++学习笔记----6、内存管理（五）---- 智能指针（3）
weixin_71738303的博客
09-11 1179
与指向特定类型的原始指针可以转化为不同类型的指针一样，shared_ptr保存特定的类型可以转化为一个另一种类型的shared_ptr。转化shared_ptr的函数是const_pointer_cast()，dynamic_pointer_cast(),static_pointer_cast()和reinterpret_pointer_cast()。前面简要提过，当拥有共享属主的智能指针，例如shared_ptr不在活动范围或者被重置时，只有它是最后指向的智能指针时才能释放其指向的资源。
shader 案例学习笔记之将坐标系分成4个象限
最新发布
localhost
09-13 210
坐标系被分成了4个单元格，每个单元格都有唯一的索引，后续就可以根据索引去渲染。
JavaScript高级程序设计核心笔记-ECMAScript与DOM解析
DOM允许JavaScript改变页面内容、样式和结构，不同级别的DOM标准扩展了更多功能，如SVG和MathML。现代浏览器通常对DOM提供了良好的支持，使得开发者能够方便地进行网页动态化和交互设计。 最后，最佳实践部分强调了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值