javascript DOM拓展

Posted 2021-11-28 wangzirui98

针对JS高级程序设计这本书，主要是理解概念，大部分要点源自书内。写这个主要是当个笔记加总结
存在的问题请大家多多指正！

DOM拓展

1选择符 API

1.1 querySelector()

由document调用，参数可以直接用css选择器的方式选择，选择成功返回选择到的第一个元素，选择失败则返回Null

var body = document.querySelector('body')
var myDiv = document.querySelector('#myDiv')
var selected = document.querySelector('.selected')
var img = document.querySelector('img.button')

1.2 querySelectorAll()

接受的参数是一样的，但是唯一不一样的事不仅仅接受一个元素，而是一个NodeList实例

NodeList总说，无非是拥有Item()方法，有length属性，还可以用[]来代替.item()。但是可能是经过了优化，在getElementByTagName上那种不一样，那种是实时显示的，这个NodeList实例类似一个快照，不会进行动态的查询。

1.3 matcheSelector()

这个方法通过element对象调用，参数是通过CSS选择器确定的另一个element对象，如果匹配，返回true，如果不匹配，返回false。

2.元素遍历

IE头铁，因为document对象调用childNodes的时候会忽略掉文本节点和注释，这回别人家为了弥补一下跟IE的差异，特别为dom加了五个属性

• childElementCount:返回子元素的个数，不包括文本节点和注释
• firstElementChild：指向一个元素；firstChild带上元素
• lastElementChild：同理
• previousElementSibling：同理
• nextElementSilbling：同理

html5

HTML5带了一堆新的API，来瞅两眼。

3.1 与类相关的扩充

3.1.1getElementByClassName()

因为之前只有getElementById或者getElementByTagName，为了给类也整一个，所以就研究了一个getElementByClassName(),跟getElementByTagName没两样。参数是class，可以传入多个，用空格隔开，前后顺序无所谓。

例子：

var allCurrentUsernames = document.getElementsByClassNmae('username current')
var select = document.getElementById('myDiv').getElementByClassName('selected')

3.1.2 classList属性

之前操作类名:

var className  = div.className.split(/\s+/)

var pos = -1,
    i,
    len
for(i=0, len = classNames.length; i<len; i++){
  if(className[i]=='user'){
    pos = i
    break
  }
}

上炕都费劲，为了扭转这个尴尬的方法，所以HTML5加了一个新操作，就是给了element一系列属性

• add(value)
• contains(value)
• remove(value)：
• toggle(value)：切换操作，有了value把它删掉，没有value把他加上

上面那种操作简化一下：div.classList.remove(‘user‘)就完事了。

另外classLIst拥有item()方法

3.1.3 插入标记

1.innerHTML属性

innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记，也就是说你编辑器里里面有啥他都能给你返回来，但是调用的元素的标签不在。

通过设置innerHTML属性的值可以设置里面的内容，可以原封不动的访问。

但是也会一些问题，比如说script标签会被忽略，因为script在浏览器里没有显示，所以他是个没有作用域的元素。可以再前面加个input标签，然后把input隐藏.

div.innerHTML = '<input type = \"hidden\"><script>alert('laotie666'')</script>'

这样不影响布局也不会让script标签被干掉

2.outerHTML属性

跟上面的差不多，区别是innerHTML不包括对象的标签，只换对象内部的标签。

而outerHTML属性一换把外面自己的标签也给换掉了。例子就不举了

3.insertAdjacentHTML()

里面两个参数，第一个是要插入的方式，第二个是插入的东西，方式如下，字符串格式：

• ‘beforebegin‘:当前元素之前插一个同辈
• ‘afterbegin‘:当前元素之下插入一个新子元素或者在一个字元素之前插入新子元素(有点绕)，就是有旧儿子插到旧儿子前头，没儿子就插进一个儿子
• ‘beforeend‘:没儿子插进一个儿子，有很多儿子在最后一个旧儿子后面插一个儿子
• ‘afterend‘:在当前元素之后插入一个同辈元素

4.专有拓展

4.1 children属性

ie最近这个children只带元素的子节点，除此之外和childNode没有啥区别

4.2 contains()方法

某个节点是不是摸个节点的后代，A.contains(b)，若B是A的后代节点，则返回true

4.3 插入文本

因为原来有innerHTML和outerHTML已经被纳入规范了，所以还剩了个innerText和outerText,来讲一讲

4.3.1 innerText属性

和innerHTML就差在text不能加入HTML标签，firefox不给你用。

如果你有带HTML标签的节点的话可以利用这一点去除HTML标签，就是：

div.innerText = div.innerText

4.3.2outterText属性

类似，文本节点会把元素替换掉，剩下的元素会被文当删除