DOM-Core(核心DOM)

一.绘制DOM树  ,看如下html结构,绘制出其dom树的结构

<div>

<p>你好,今天的<span style="color:red">天气</span>很好,但是早上<b>风</b>很大</p>

</div>

答:最底部是div,而div的直接子元素有三个,一个是p标签元素,另外两个是div的换行(两个空),而p标签下有1.(你好,今天的)文本节点,2.span标签,3.(很好,但是早上)的文本节点,4.b标签,5.(很大)的文本节点;p标签下是1.(天气)的文本节点,2.style的属性节点;b标签下是(风)的文本节点.

二.DOM中提供了哪些api

DOM-Croe(核心DOM),是指通用DOM结构提供的统一的api

api很多,因此按照要求满足即可

对于DOM树下结构,允许通过一个节点,访问其父节点,子节点,兄弟节点

如:

node.parentNode      父节点;

node.childNodes[i]     子节点;

node.firstChild         第一个子节点;

node.lastChild       最后一个子节点;

node.previousSibling    上一个兄弟节点;

node.nextSibling     下一个兄弟节点;

node.attributes[i]     属性节点;

元素搜索(通过id, class,tag等)

成员操作(属性的操作,样式的操作),

node.setArribute('属性名','属性值');

node.getAttribute('属性名');

在属性的操作方法中海油一类方法带有一个node结尾的方法;

对属性节点的操作

按照我们的操作规律,无非是添加属性,修改属性的值,或删除属性

1.添加属性:

先创建属性:document.createAttribute('属性名');

使用nodeValue来设置属性的值;

利用setAttributeNode 来添加属性

2.修改节点

body  itcast = "传智播客"

body itcast ="黑马程序员"

3.删除属性

使用removeAttribute

使用removeAttributeNode

总结:dom无非就是对元素节点和文本节点进行增删改查操作;

四.字符串的split方法

string.split('string')将一个字符串按照某一个字符串进行分隔,剩下的结果组成的数组,

'a,b,c'.split(',')=>['a','b','c',]

'abc'.split('')=>['a','b','c']

首先注意:页面中所有的东西都是对象,因此找到该对象修改即可

1.拿到页面中的所要修改的属性对象

var attr = document.body.getAttributeNode('属性名');

2.利用nodeValue设置对象的值

attr.nodeValue = '值'

五.对元素节点进行操作

创建元素节点并加入到页面中

创建元素

var elemObj = document.createElement('元素名')

将元素加到页面中

追加

elem.appendChild(ele);

插入到某一个元素的前面

elem.parentNode.insertBefore(newElem,oldElem)

要将一个元素插入到某一个元素的后面

封装一个方法:

function insertAfter(newElem,oldElem){

var parent = oldElem.parentNode,

next = oldElem.parentNode;

if(next){

parent.insertBefore(newElem,next);

}else{

parent.appendChild(newElem);

}

}

除了dom方法以外,还有innerText 和innerHtml(不是domcore方法)

对元素的删除

加不加node的区别

setAttribute     设置属性

setAttributeNode  设置属性节点

如果要设置一个元素img的属性title为某一个具体的值;