DOM: 文档对象模型:
DOM 节点 HTML文档中所有内容都是节点(对象):
- 整个文档是一个文档节点 文档对象:document
- 每个HTML元素是元素节点 标签对象: Element
- HTML元素内的文本是文本节点 文本对象: Text
- 每个HTML属性是属性节点 属性对象: Attr
- 注释是注释节点 注释对象:Comment
DOM:
- dom-core: document对象
- Html-dom: 标签,属性,文本对象
- Css-dom: 操作css样式
Element对象: 对标签的操作
通过层次关系获取标签: 父元素, 子元素, 后面的兄弟元素, 前面的兄弟元素
父元素:
- parentNode 返回元素的父节点
子元素:
- childNodes 返回子节点的NodeList
- firstChild 返回元素的首个子节点
- lastChild 返回元素的最后一个子节点
兄弟元素:
- nextSibling 返回元素之后紧跟的节点
- previousSibling 返回元素之前紧随的节点
*兼容写法(浏览器兼容问题,建议使用):
- oNext = oParent.nextElementSibling || oParent.nextSibling
- oPre = oParent.previousElementSibling II oParent.previousSibling
- oFirst = oParent. firstElementChild |I oParent.firstChild
- oLast = oParent.lastElementChild II oParent.lastChild
节点的信息
innerHTML属性 获取元素内容
1)nodeName属性规定节点名称
- nodeName属性是只读属性
- 元素节点的nodeName与标签名称相同
- 属性节点的nodeName与属性名称相同
- 文本节点的nodeName始终是#text
- 文档节点的nodeName始终是#document
- nodeName始终包含HTML元素的大写字母标签名称
2)nodeType属性返回节点类型,只读属性
元素类型 nodeType
元素 1
属性 2
文本 3
注释 8
文档 9
3)nodeValue属性规定节点值
- 元素节点的nodeValue是undefined或null
- 文本节点的nodeValue是文本本身
- 属性节点的nodeValue是属性值
代码
<p id="myid1" style="color:blue">我的文档内容1</p> <p id="myid2" style="color:blue">我的文档内容2</p> <script type="text/javascript"> var node=document.getElementById("myid1"); //通过id号获取元素节点 document.write(node.innerHTML+"<br>"); //输出元素节点的文本内容 node.innerHTML="更新文档内容 via innerHTML"; //更新元素节点的文本内容 document.getElementById("myid2").firstChild.nodeValue="更新文档内容via nodeValue";//更新元素节点的文本内容 document.write(node.nodeName+"\t"+node.nodeValue+"<br>"); document.write(node.firstChild.nodeName+"\t"+node.firstChild.nodeValue+"<br>"); //输出文本节点和值 </script>
对标签属性的操作
1) hasAttributes() 判断这个标签是否有属性: 返回值 boolean
2) 获取属性对象
getAttributeNode() 以Attribute对象返回属性节点
getAttribute() 返回属性的值
3) 设置属性
setAttribute(name,value) 修改指定属性的属性值
标签的创建,添加, 删除
createElement(标签名) : 创建一个标签的对象 *
A.appendChild(B): 把B添加到A元素所有的子元素的最后一个位置 *
父元素.insertBefore(新添加的元素, 已存在的子元素): 把A插入到B元素所有的子元素的第一个位置 *
//往页面添加一个img标签 function addBook(index) { /* //1.创建这个img标签 var newImgEle = document.createElement("img"); //2.给img标签设置一个src属性 newImgEle.setAttribute("src", "./images/" + index + ".jpg"); newImgEle.setAttribute("width", "300px"); newImgEle.setAttribute("height", "300px"); //3.把这个创建的标签添加到html页面中 var boxEle = document.getElementById("box"); // boxEle.appendChild(newImgEle); //insertBefore(新添加的元素, 已存在的元素) //父元素.insertBefore(新添加的元素, 已存在的子元素) // 把新添加的元素添加到父元素内部, 但是在已存在的子元素的前面 // 把新添加的元素 插入到已存在元素的前面 var img2Ele = document.getElementById("img1"); boxEle.insertBefore(newImgEle,img2Ele); */
cloneNode(deep): 复制某个指定的节点
父元素.removeChild(子元素对象):删除子元素
replaceChild(newNode, oldNode) 属性attr : 用其他的节点替换指定的节点
<script> //删除元素 removeChild() function del() { //1.获取要删除的元素对象 var phone1Ele = document.getElementById("phone1"); phone1Ele.parentNode.removeChild(phone1Ele); } function change() { //1. 修改的元素, 标签没有变, 修改的是属性 setAttribute() //var phone2Ele = document.getElementById("phone2"); //phone2Ele.setAttribute("src","./images/phone-4.png"); //使用replaceChild() // var phone2Ele = document.getElementById("phone2"); // var newEle = document.createElement("img"); // newEle.setAttribute("src","./images/phone-4.png"); // phone2Ele.parentNode.replaceChild(newEle,phone2Ele); //2. 修改元素, 跟标签也修改 使用replaceChild() var phone2Ele = document.getElementById("phone2"); var newEle = document.createElement("p"); //<p>这是p标签</p> newEle.innerHTML="这是p标签"; phone2Ele.parentNode.replaceChild(newEle,phone2Ele); } </script>
操作css样式
一、使用行内样式: <div style=”width:700px;”> </div>
获取/设置标签的属性:
1) getAttribute() setAttribute()
2) HTML中, 获取/设置标签的属性: 简写:
标签对象.属性名 = 值; 添加/修改属性
例如:document.querySelector(".post").style.display = "none";
标签对象.属性名 获取属性的值
添加行内样式 标签对象.style.样式属性名=值;
js的样式属性: 采用的驼峰命名法: font-size(css) --> fontSize(js)
background-color --> backgroundColor;
注意: 标签对象.style.样式属性名添加行内样式,不会把之前的行内样式清除
这个标签没有样式属性,不会覆盖,
标签有样式属性, 使用style添加, 覆盖
<!--行内样式--> <div id="box" style="width:300px;height:300px ;border: 1px solid red;"></div> <button type="button" onclick="change()">按钮</button> <script> function change() { //style 作为标签的属性 //获取属性 getAttribute() //console.log(document.getElementById("box").getAttribute("style")); //设置style的值: setAttribute() //document.getElementById("box").setAttribute("style", "width:300px;height:300px;background:red;"); //获取标签的属性: //标签的对象.属性名 var boxEle = document.getElementById("box"); // console.log(boxEle.id); // //标签对象.style 得到标签行内样式style对象 // console.log(boxEle.style) //{name1:值1;name2:值2} //添加行内样式 标签对象.style.样式属性名=值; // js的样式属性名与css的样式属性名有一点区别: // css中样式属性 多个单词组成, 单词与单词之间使用-分隔; font-size, background-color // js的样式属性: 采用的驼峰命名法: font-size(css) --> fontSize(js) //添加行内样式 boxEle.style.backgroundColor="#ABCDEF"; boxEle.style.border="1px solid yellow"; } </script>
在js中, 也可以使用css中的选择器获取标签 *
elemen = document.querySelector(selectors); 返回css选择器的第一元素
elementList = document.querySelectorAll(selectors); 返回所有元素节点列表
使用js代码给标签绑定事件:
之前:<input type=”button” onclick=”fun()”>在标签上绑定事件
1) 第一种方式: 标签对象.事件=函数;
document.body.onload=function(){
}
2) Js提供一个绑定事件的函数
addEventListener(“事件类型”,事件触发的函数);
注意: 事件类型: 之前写的事件把on去掉:
Onclick --> addEventListener(“click”)
Onload --> addEventListener(“load”)
document.querySelector(".bbs header span").addEventListener("click",function() {
});
注意: addEventListener()不能绑定onload事件
对于下拉框, 通过js选中指定选项
options[] 返回包含下拉列表的所有选项的一个数组
selectedIndex 设置或返回下拉列表中被选中项目的索引号