原生js清空上一个元素内容_原生javascript中的Dom操作中的增删改查

查找

已经站在一个节点上，找周围相邻的元素 遍历节点父子关系

parentNode

parentElement

childNodes

children

都返回动态集合

firstChild

firstElementChild

lastChild

lastElementChild

兄弟关系

previousSibling

previousElementSibling

nextSibling

nextElementSibling

强调:

节点树

缺：

会受到空文本的干扰

优:

包含所有网页内容

没有兼容性问题

元素树

优:

不受空文本的干扰

缺:

只包含元素节点

除children外，都有兼容性问题。

2.在整个页面或在指定父元素下，根据html或选择器查找元素

如果通过标签或一个属性即可获得想要的元素时 按HTML查找

按Id

var elem=document.getElementById("id");

按TagName

var elems=parent.getElementsByTagName("标签名");

按Name

var elems=parent.getElementsByName("name");

按ClassName

var elems=parent.getElementsByClassName("class")

除ById外，都返回动态集合

不仅查找直接子元素，而且查找所有子代元素

如果经过复杂的选择逻辑，才能获得想要的元素时

按选择器查找

仅找一个元素

var elem=parent.querySelector("选择器");

可能找到多个元素

var elems=parent.querySelectorAll("选择器")

返回非动态集合

可直接获取的节点

html

document.documentElement

head

document.head

body

document.body

修改

操作节点内容html原代码innerHTML没有兼容性问题

去掉标签后的纯文本textContent

DOM

IE8

innerText

操作节点属性

标准属性

attribute特性 在开始标签中显式定义的

核心DOM

getAttribute("属性名")

setAttribute("属性名","值")

HTML DOM

elem.属性名

property属性

内存中元素对象的属性

elem.属性名

自定义属性

核心DOM

getAttribute("属性名")

setAttribute("属性名","值")

HTML5

定义属性时

data-属性名="值"

访问

elem.dataset.属性名

操作节点样式

内联样式

elem.style.属性名

今后只要修改一个元素的样式都要用style

计算后的样式var style=getComputedStyle(elem); style.属性名

只读

只要获得一个元素完整样式，就用getComputedStyle

样式表中的样式

var sheet=document.styleSheets[i]

var rule=sheet.cssRules[i]

rule.style.属性名

添加和删除节点

添加元素

3步

创建空元素对象

var a=document.createElement("a")

设置关键属性

a.href="http://imooc.con" a.innerHTML="go to imooc";

将新元素添加到指定父元素下

追加

parent.appendChild(child)

插入

parent.insertBefore(child,oldElem)

替换节点

parent.replaceChild(child,oldElem);

优化

尽量少操作DOM树

如果同时添加父元素和子元素

在内存中先将子元素添加到父元素，再将父元素整体挂到页面

如果父元素已经在页面上，需要添加多个平级子元素时

3步

创建文档片段

var frag=document.createDocumentFragment();

将子元素添加到文档片段

frag.appendChild(child);

将文档片段添加到页面父元素下

parent.appendChild(frag)

删除

parent.removeChild(child);

child.parentNode.removeChild(child)