JavaScript学习笔记之DOM基础 2.4

前端之家收集整理的这篇文章主要介绍了JavaScript学习笔记之DOM基础 2.4前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

DOM的发展,与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑,DOM才能正确地发挥其功用。如今,正确的语义结构、表现与内容分离等要求,都已经成为网页设计中的基本要求。因此,在网页前端开发中,DOM的存在,无疑是为表现层、行为层甚至内容层面的连接提供了一个绝佳的API,成为热门的Ajax应用中不可或缺的组成部分。

一、平稳退化

1、概念

早期,在未使用JavaScript之前,网页中的内容可以正常显示出来,用户可以通过外设(如鼠标)操控浏览到相关内容,这种浏览体验对用户而言可能并不理想。

根据这个需求,内容的提供方就有了合理化目标——那就是在不影响内容展示的前提下,使用JavaScript来改善用户体验,提高用户粘性。

在这个标目中,有个非常明显的条件,就是不能影响内容的正常展示,换言之,即使用户的浏览器不支持JavaScript,也能保证用户可以正常浏览。

2、方法

①将JavaScript与HTML分离

这是首先应该想到的,让两者分离,HTML就像回到早期未使用JavaScript之前的状态,干爽如初啊。

譬如将element.onClick之类的事件处理函数写进JavaScript中,与某函数进行绑定。

②对JavaScript中的方法进行检测

之前提到的一些方法,如getElementById之类,都需要去判定该方法是否支持

if(! document.getElementById) return false;

通过if语句这种方式来检测是否支持方法,如果支持,可以继续,不支持,直接返回false,这样就没必要耽误功夫了,也起到了性能优化的作用。

二、绑定onload事件

1、绑定缘由

一些函数需要在页面加载完全之后才能有效执行,我们需要将函数绑定到window.onload这个事件上。

<Meta charset="utf-8"> 筱雨生 - <a href="https://www.jb51.cc/tag/boke/" target="_blank" class="keywords">博客</a>园

筱雨生

時光飛逝,莫讓網絡蹉跎了歲月

  • 在上面这个实例中,如果不绑定window.onload,执行函数tagAttribute将会毫无意义。

    还需要注意一点,绑定的是函数,而不是这个函数的值,所以后面不带圆括号。

    2、绑定方法

    如果你只需要绑定一个函数,那么上面的方法完全可以轻松实现你的目的。

    如果是多个,也许你会去一个个的绑定,可是,这样做的结果是只有最后一个函数才会被有效执行,关于这一点其实很好理解。

    我们的目的是,不管页面中加载完毕时执行多少个函数,这些函数都可以有效执行,也就是说,这些函数都被成功绑定window.onload事件。

    <Meta charset="utf-8"> 筱雨生 - <a href="https://www.jb51.cc/tag/boke/" target="_blank" class="keywords">博客</a>园

    筱雨生

    時光飛逝,莫讓網絡蹉跎了歲月

  • javascript学习笔记 Dom知识点总结

    JavaScript的window对象对应着浏览器窗口本身,因此这个对象的属性方法统称为BOM(浏览器对象模型),如window.open(),window.location等。

    JavaScript的document对象是指文档对象模型,主要是处理网页内容。DOM(Document Object Model)即文档对象模型,是针对 HTML 和 XML 文档的 API 。字母D指document(文档),字母O指object(对象),字母指Model(模型)。DOM 描绘了一个层次化的节点树。节点表示一个连接点,文档是由节点构成的集合,DOM的节点主要分为三类:元素节点、文本节点(不是文本内容)、属性节点。

    获取节点的名称和类型

    1.nodeName属性用来获取节点的名称,文本节点返回#text,元素节点返回标签名称(此时等价于tagName)。语法:目标节点.nodeName 2.nodeType属性用来获取节点的类型,元素节点:1,属性节点:2,文本节点:3。语法:目标节点.nodeType 3.nodeValue属性用来获取和设置节点的值。元素节点返回 null 。语法:目标节点.nodeValue

    获取元素节点的方式

    1. document.getElementById

    通过ID查找,返回唯一元素节点

    2. document.getElementsByName

    通过name属性查找,返回元素节点数组

    3. document.getElementsByTagName

    通过标签名称查找,返回元素节点数组

    以下三种方法属于HTML5 DOM,并非所有浏览器支持(如某些低版本IE就不支持),属于高级方法

    4. document.getElementsByClassName

    通过class属性的类名查找,返回元素节点数组

    5. document.querySelector

    通过selector条件获取元素节点,只返回符合条件的第一个元素节点

    6. document.querySelectorAll

    通过selector条件获取元素节点,返回所有符合条件的元素节点数组,多条件使用逗号分隔,表示要查找的元素必须符合所有逗号分隔的条件,如果一个元素只符合逗号分隔的条件中的一个,则不会被返回

    小结: getElementById和querySelector只返回一个元素节点,而getElementsByName、getElementsByTagName、getElementsByClassName、querySelectorAll返回的是元素节点数组

    节点指针

    1.childNodes属性用来获取元素节点的子节点,返回节点数组。语法:父节点.childNodes;

    2.children属性可以用来获取忽略了空白节点的有效节点(在某些浏览器上,空白符或换行符也是一个文本节点)。语法:父节点.children;

    3.firstChild属性可以用来获取元素的第一个子节点,等价于 childNodes[0]。语法:父节点.firstChild;

    3.lastChild属性可以用来获取元素的最后一个子节点,等价于 childNodes[childNodes.length-1]。语法:父节点.lastChild;

    4.prevIoUsSibling属性用来获取目标节点的前一个兄弟节点。语法:目标节点.prevIoUsSibling;

    5.nextSibling属性用来获取目标节点的后一个兄弟节点。语法:目标节点.nextSibling;

    6.parentNode属性用来获取已知节点的父节点。语法:子节点.parentNode;

    7.ownerDocument属性用来当前节点所在文档的根节点,等价于document。语法:目标节点.ownerDocument;

    节点的操作

    1.createElement方法用来创建元素节点。语法:document.createElement('元素标签名称');

    2.createAttribute方法用来创建属性节点。语法:document.createAttribute('属性名称');

    3.createTextNode方法用来创建文本节点。语法:document.createTextNode('文本内容');

    4.appendChild方法用来在目标节点的子节点的末尾添加一个子节点(可以是createElement创建的元素节点,也可以是createTextNode创建的文本节点)。语法:parent.appendChild(要插入的节点);

    5.insertBefore方法用来在目标元素的前面插入一个新元素节点,此时的指针在目标元素的父级上。语法:parent.insertBefore(newElement,targetElement);

    6.DOM中没有insertAfter这个方法,但是可以通过以下方法来模拟insertAfter;

    添加新元素 */ parent.appendChild(newElement); }else{ /* 否则,就把新元素添加到目标元素和目标元素的下一个兄弟元素之间 */ parent.insertBefore(newElement,targetElement.nextSibling); } }

    7.replaceChild方法用来替换一个元素节点,此时的指针在目标元素的父级上。语法:parent.replaceChild(replaceElement,targetElement);

    8.cloneChild方法用来克隆一个元素节点,传递一个布尔参数,参数为true时表示复制当前节点及其所有子节点,参数为false时表示支付至当前节点。语法:目标元素.cloneChild(true|false);

    9.removeChild方法用来删除一个指定节点。语法:removeChild(要删除的节点);

    10.getAttribute方法用来获取一个属性的值。语法:目标元素.getAttribute(元素属性名称);

    11.setAttribute方法用来设置一个属性的值,没有该属性则创建。语法:目标元素.setAttribute(元素属性名称,属性值);

    12.removeAttribute方法用来删除一个属性节点。语法:目标元素.removeAttribute(要删除属性名称);

    DOM操作内容

    1.innerHTML属性用来获取和设置HTML内容。语法:元素节点.innerHTML 或者 元素节点.innerHTML = 'HTML字符串';

    2.innerText|textContent属性用来获取和设置文本内容。fireFox使用textContent来获取和设置(注意兼容性)。语法:元素节点.innerText 或者 元素节点.innerText = 'HTML字符串';

    DOM操作样式

    1.style属性用来获取和设置元素的行内样式。语法:element.style;style属性只能获取和设置行内样式,对于如font-size这种样式属性,应该去掉 - 并且将 - 后面的第一个字母大写,驼峰法来获取和设置 如:element.style.fontSize,element.style.backgroundColor

    2.getComputedStyle全局方法用来获取计算后的样式,第一个参数是元素节点,第二个参数是类型,如:hover,:active等伪类,默认情况下传 null,某些IE版本使用currentStyle属性获取 Box.currentStyle。语法:window.getComputedStyle(元素,类型)

    3.className属性用来获取和设置元素的样式名称。语法:element.className

    4.自定义的 addClass() | hasClass() | removeClass() 方法

    添加新样式 function addClass(element,className){ if(hasClass(element,className) == false){ element.className += ' '+className; } } //移除元素的指定样式 function removeClass(element,className){ var currentClass = element.className; if(hasClass(element,className)){ currentClass = currentClass.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' '); //去除空格 currentClass = currentClass.replace(/(^\s*)|(\s*$)/g,''); element.className = currentClass; } }

    DOM操作位置和大小

    1.clientWidth属性用来获取元素的实际宽度,该值受滚动条和内边距影响,外边距和border不会影响。语法:

    element.clientWidth;

    2.clientHeight属性用来获取元素的实际高度,该值受滚动条和内边距影响,外边距和border不会影响。语法:

    element.clientHeight;

    3.offsetWidth属性用来获取元素的实际宽度,该值受边框和内边距影响,外边距和滚动条不会影响。语法:

    element.offsetWidth;

    4.offsetHeight属性用来获取元素的实际高度,该值受边框和内边距影响,外边距和滚动条不会影响。语法:

    element.offsetHeight;

    5.offsetTop和offsetLeft属性用来获取元素相对于父级的位置。该值受外边距影响。语法:element.offsetTop ||

    element.offsetLeft;

    6.scrollTop和scrollLeft属性用来获取滚动条被隐藏的区域大小,也可设置定位到该区域(比如返回顶部)。语法:

    element.scrollTop || element.scrollLeft || element.scrollTop = 0;

    常用到的简洁快速的document属性方法

    document.title 用来获取文档标题

    document.domain 用来获取当前域名

    document.URL 用来获取当前url路径

    document.forms 获取表单集合

    document.images 获取图片集合

    document.body 获取body元素节点

    document.compatMode 识别文档模式

    原文链接:https://www.f2er.com/js/52909.html

    猜你在找的JavaScript相关文章