dom对象的innerText和innerHMTL有什么区别呢?

innerText、textContent以及innerHTML的区别

innerText返回从body元素开始所有文本内容,并以文档没添加样式是的排版方式的显示

innerHTML返回从body元素开始所有的带标签的文本内容,并按照在HMTLW文档中的原格式显示

textContent返回从body元素开始所有的文本内容,排版方式按照在html文档中的原格式显示但不带标签

elem.children和elem.childNodes的区别?

elem.children属于html集合接口,将返回一个当前节点的所有子元素的动态的伪数组

elem.childNodes属于NodeList接口,将分返回一个当前节点的所有子节点的伪数组

   

  • demo1
  • demo2

var ul = document.getElementById('box') console.log(ul.children) console.log(ul.childNodes)

dom对象的innerText和innerHMTL有什么区别呢?_第1张图片

3.查询元素有几种常见的方法?

通过id

通过TagName

通过className

通过querySelector()和querySelectorAll()querySelector方法返回匹配指定的CSS选择器的元素节点;如果有多个节点满足匹配条件,则返回第一个匹配的节点(最上层的节点)querySelectorAll方法返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象;

4.如何创建一个元素?如何给元素设置属性?

创建元素节点:createElement()

设置元素属性setAttribute()和node.style

bg-blue{ background: lightblue; width: 100px; height: 100px; } //js代码 var div = document.createElement('div') div.className = 'bg-blue' div.setAttribute('style','color:red') div.innerHTML = 'demo'; document.body.appendChild(div)

元素的添加,删除?

添加ele.appendChild();

insertbefore()

删除方法:removechild();

.DOM0 事件和DOM2级在事件监听使用方式上有什么区别?

DOM 0级事件处理程序是 通过javascript制定事件处理程序的传统方式

添加事件:

ele.onclick

删除dom0事件处理程序

ele.onclick=null

DOM 0级事件处理程序的优点是简单且具有跨浏览器的优势,缺点是一个事件处理程序只能对应一个处理函数

DOM2级事件处理程序是在2级DOM中规定的API,通过addEventListener(IE为attachEvent)去监听事件

ele.addEventListenter('click',fucntion(){},false);

removeEventListener(IE为detachEvent),关于removeEventListener的注意事项请详见上文移除事件章节;至于attachEvent与addEventListener的区别详见后文IE兼容性addEventListener的优点是一个事件处理程序能对应多个处理函数,缺点是存在兼容性问题。

.attachEvent与addEventListener的区别?

attachEvent是IE浏览器专属的事件监听方式,一般的标准浏览器使用addEventListenter();

eventname必须包含on以及没有usecapture;
同时,使用attachEvent方法和addEventListener主要区别在于事件处理程序的作用域。采用addEventListener,事件处理程序会在其所属元素的作用域内运行。使用attachEvent,事件处理程序会在全局作用域内运行,因此this等于window。

解释IE事件冒泡和DOM2事件传播机制?

ie的事件冒泡:当发生事件时,目标节点先捕获,然后卓级向上传递到父节点,

2级DOM规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段

如何阻止事件冒泡? 如何阻止默认事件?


停止事件传播
通过调用事件对象的stopPropagation方法,在任何阶段(捕获阶段或者冒泡阶段)中断事件的传播;此后,事件不会在后面传播过程中的经过的节点上调用任何的监听函数;demo:stopPropagation但event.stopPropagation()不会阻止当前节点上此事件其他的监听函数被调用。如果你希望阻止当前节点上的其他回调函数被调用的话,你可以使用更激进的event.stopImmediatePropagation()方法;demo:stopImmediatePropagation

阻止浏览器的默认行为
当特定事件发生的时候,浏览器会有一些默认的行为作为反应。例如,使用a元素时会自动添加click事件,当a元素上click事件触发时,它会向上冒泡直到DOM结构的最外层document,浏览器会解释href属性,并且在窗口中加载新地址的内容。如果我们需要阻止浏览器针对点击事件的默认行为,可以调用event.preventDefault()demo:preventDefault

你可能感兴趣的