DOM
document object module文档对象模型
NodeType nodeValue nodeName
element 1 null 元素的标签名
attribute 2 属性的值 属性的名称
text 3 所包含的文本 #text
document 9 null #document
fragment 11
获取DOM中指定元素
getElementById()
document.getElementById("元素id");
getElementsByName()
返回的是一个数组对象,所以使用时要用数组下标
document.getElementsByName("表单元素name值");
alert(document.getElementsByName("web")[0].value);
getElementsByTagName()
返回的是一个数组对象,所以使用时要用数组下标
console.log(document.getElementsByTagName('div')[0].innerHTML);
在DOM中,每一个元素节点都被看成一个对象。既然是对象,那肯定有相关属性和方法
getElementsByClassName(‘类名’)
返回带有指定类的所有元素的NodeList
节点属性(用于查找)
parentNode | 获取当前节点的父节点 |
---|---|
childNodes | 获取当前节点的子节点集合 |
firstChild | 获取当前节点的第一个子节点 包含文本 |
lastChild | 获取当前节点的最后一个子节点 包含文本 |
previousSibling | 获取当前节点的前一个兄弟节点 |
nextSibling | 获取当前节点的后一个兄弟节点 |
attributes | 元素的属性列表 |
firstElementChild | 只包含节点不包含文本 |
lastElementChild | 只包含节点不包含文本 |
children | 获取当前节点的元素子节点集合,只包含节点不包含文本 |
nextElementSibling 只包含节点不包含文本
previousElementSibling 只包含节点不包含文本
childElementCount 返回子元素的个数
元素里面的文本值会给查找产生很大的影响
<script type="text/javascript">
var e = document.getElementById("list");
if (e.parentNode) {
alert("该节点有父节点");
}
</script>
节点常用的属性
tagName 标签名
innerHTML 内部html
id 标签的id
style 标签的style
className 标签的class
value
DOM节点常用操作
创建节点
createElement(‘标签名’)
创建元素节点
createTextNode(‘内容’)
创建文本节点
window.onload=function() {
var e = document.createElement("h1");
var txt = document.createTextNode("hujaing");
e.appendChild(txt); //把元素内容插入元素中去
document.body.appendChild(e);
}
<script type="text/javascript">
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);
</script>
createAttribute(‘属性名’)
创建属性节点
//1.创建一个img元素节点
var img = document.createElement('img');
//2.添加节点到页面中指定元素节点(父节点)下
var root = document.getElementById('imgdiv');
root.appendChild(img);
//属性节点的设置
//img.src = 'images/1.jpg'; 添加图片方式一
// img.setAttribute('src','images/1.jpg'); //添加图片方式二,推荐使用
var src = document.createAttribute('src');
src.value = 'images/1.jpg';
img.attributes.setNamedItem(src);//添加图片方式一
//文本节点的设置
var p = document.getElementById('p');
p.innerHTML = '我是文本' //添加文本方式
插入节点
appenChild()
把新的节点插入到当前节点的“内部”,在父节点的末尾添加
父节点.appendChild(新的子节点)
insertBefore()
将新的子节点添加到当前指定节点的前面
父节点.insertBefore(新的子节点,在这个节点前插入新的节点)
appendChild()和insertBefore()这2种插入节点方式都需要获取父节点才能进行操作
删除节点
removeChild()
删除当前父节点下的某个子节点
父节点.removeChild(子节点)
document.getElementById('div').removeChild(document.getElementById('div02'))
克隆节点
cloneNode()
cloneNode()方法来实现复制节点
obj.cloneNode(bool)
参数obj表示被复制的节点,而参数bool是一个布尔值,取值如下:
(1)1或true:表示复制节点本身以及复制该节点下的所有子节点;
(2)0或false:表示仅仅复制节点本身,不复制该节点下的子节点;
var e=document.getElementById('div').cloneNode(1);
document.body.appendChild(e);
替换节点
replaceChild()
被替换节点的父节点.replaceChild(替换后的新节点,需要被替换的旧节点)
innerHTML属性声明了元素含有的HTML文本,不包括元素本身的开始标记和结束标记。包括文字和里面的元素标签
innerText属性与inerHTML属性的功能类似,只是该属性只能声明元素包含的文本内容。
<div id="lvye"><strong>绿叶学习网</strong></div>
innerHTML内容是:<input id="txt1" type="text"><br/>
innerText内容是:<input id="txt2" type="text">
<script type="text/javascript">
var e = document.getElementById("lvye");
document.getElementById("txt1").value = e.innerHTML; //<strong>绿叶学习网</strong>
document.getElementById("txt2").value = e.innerText; // 绿叶学习网
</script>
HTML代码 | innerHTML返回值 | innerText返回值 |
---|---|---|
绿叶学习网 | “绿叶学习网” | “绿叶学习网” |
绿叶学习网 | “绿叶学习网” | “绿叶学习网” |
““ | “”(空字符串) |
<script type="text/javascript">
var e = document.getElementById("lvye");
e.innerHTML="<span style='color:red;font-weight:bold;'>绿叶学习网</span><span style='color:blue;font-weight:bold;'>JavaScript入门教程</span>";
</script>
属性节点
nodeType节点类型
- 元素节点的nodeType 为1
- 属性节点的nodeType为2
- 文本节点的nodeType为3
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
获取属性节点
attributes[‘属性名’]
查看和修改属性节点
getAttribute(‘属性名’) | 返回指定的属性值。 |
---|---|
setAttribute(‘属性名’,‘属性值’) | 把指定属性设置或修改为指定的值。 |
//.1先获取元素节点
var d1 = document.getElementById('d1');
//2.获取属性节点
var attr1 = d1.attributes['id'];
alert(attr1.nodeName) //id
alert(attr1.nodeValue) //dl
alert(attr1.nodeType) //2
//修改属性值
d1.style.color = 'blue; //'方法一
d1.setAttribute('style','color:blue'); //方法二
<div id="d1" class="mydiv" style="color:red">hello</div>
JS操作CSS样式
DOM对象.style.属性名;
var e = document.getElementById("contain");
e.style.color = "red";
e.style.border = "1px solid gray";
DOM对象.style['属性名']
var e = document.getElementById("contain");
e.style['color']= "red";
e.style['border'] = "1px solid gray";
DOM对象.className='类名'
var e = document.getElementById("contain");
e.className='mydiv' //给id为contain的元素添加class为mydiv的样式