DOM文档对象模型
一.节点
1.节点分类
元素类型 节点类型
-
element(元素) 1
//获取元素 var ele=document.getElementById("myImg"); console.log("Element: "+ele); console.log("nodeName: "+ele.nodeName); console.log("nodeValue:"+ele.nodeValue); console.log("nodeType: "+ele.nodeType); console.log(""); -
attr(属性) 2
//属性节点(通过元素节点获取属性节点) var attr=ele.getAttributeNode("src"); console.dir(attr); console.log("nodeName: "+attr.nodeName); console.log("nodevalue: "+attr.nodeValue); console.log("nodeType: "+attr.nodeType); console.log(""); -
text(文本) 3
//文本节点 var p=document.getElementById("myP"); var txtNode=p.firstChild; console.log(txtNode); console.dir(txtNode); console.log("nodeName: "+txtNode.nodeName); console.log("nodeValue: "+txtNode.nodeValue); console.log("nodeType: "+txtNode.nodeType); console.log(""); -
comment(注释) 8
//注释节点 var comment=document.body.firstChild; console.dir(comment); console.log("nodeName: "+comment.nodeName); console.log("nodeValue: "+comment.nodeValue); console.log("nodeType: "+comment.nodeType); -
document（文档） 9
//文档节点 console.log(document); console.log(document.nodeName); console.log(document.nodeValue); console.log(document.nodeType);
2.属性
- nodeName(节点名字)
- nodeValue(节点值)
- nodeType(节点类型)
二.从HTML获取元素
1.通过ID
-
getElementById()
-
一个元素具有ID属性，会自动生成与之同名的全局变量
//如果一个元素设置了ID,系统会生成与id同名的全局变量 box01.style.backgroundColor="green"; -
IE9+ 所有的元素都有name属性
-
IE9- 个别元素有name属性
2.通过标签名
- getElementsByTagName()
- element.getElementsByTagName()
- document.images(所有img的引用)
- document.links(所有超链接的引用)
- document.anchors(所有锚点的引用)
- document.forms（所有表单的引用）
3.通过class类型(类名)
-
getElementsByClassName()
//通过class类型 var eles=document.getElementsByClassName("box"); console.log(eles); eles[3].style.backgroundColor="#ccc"; -
IE9+
-
element.getElementsByClassName()
4.通过选择器
-
document.querySelector()
var ele=document.querySelector(".box"); console.log(ele); -
document.querySelectorAll()
//根据选择器 var eles=document.querySelectorAll(".box"); var eles=document.querySelectorAll("div"); // var eles=document.querySelectorAll("div[name='lili']"); // var eles=document.querySelectorAll("div:first-of-type"); console.log(eles); -
element.querySelectorAll()
-
element.querySelector()
5.document.all
-
文档中所有的元素
console.log(document.all);
document.all它的自带可以判断是否是IE
if (document.all) {
console.log("啊，我是IE");
} else {
console.log("啊，我不是IE");
}
三.文档节点的结构
1.节点的关系
-
父节点 父元素
//父节点 console.log(ulEle.parentNode); console.log(ulEle.parentNode.parentNode); -
子节点 子元素
var ulEle=document.queryselector("ul"); //子节点 console.log(ulEle.childNodes); console.log(ulEle.firstChild); console.log(ulEle.lastChild); -
兄弟节点 兄弟元素
//兄弟节点 var li=document.querySelector("#myItem"); console.log(li.nextSibling); console.log(li.previousSibling); -
祖先节点 祖先元素
-
后代节点 后代元素
2.节点相关属性
- parentNode（父节点）
- childNodes（所有子节点的集合）
- firstChild（第一个子节点）
- lastChild（最后一个子节点）
- nextSibling（下一个子节点）
- previousSibling（上一个子节点）
3.元素相关属性
-
parentElement（父元素）
-
大部分情况下 parentElement 等同于 parentNode
-
children（所有子元素的集合）
-
firstElementChild IE9+
-
lastElementChild IE9+
-
nextElementSibling IE9+
-
previousElementSibling IE9+
-
childElementCount 子元素的数量 IE9+
-
ownerDocument IE9+（返回元素所属的文档对象）
<script> var ulEle=document.querySelector("#myList"); //父元素 console.log(ulEle.parentElement); console.log(document.documentElement.parentNode); console.log(document.documentElement.parentElement); //子元素 console.log(ulEle.children); console.log(ulEle.firstElementChild); console.log(ulEle.childElementCount); console.log(ulEle.children.length); console.log(ulEle.ownerDocument); </script>
四、属性
1、内置属性
- js对象和html标签有映射关系
2、自定义属性
- getAttribute(attrname) 获取自定义或内置属性的值
- setAttribute(attrnane, value) 设置自定义或内置属性
- hasAttribute(attrname) 判断是否存在该属性
- removeAttribute() 移出自定义或内置的属性
3、H5新增的自定义属性操作操作
- HTML：
<tag data-attr=""> - JS ： element.dataset.attr
4、把属性当做属性节点
- getAttributeNode(attrname)
五、元素的内容
1、作为HTML的元素内容
- innerHTML
- outerHTML
2、作为纯文本的元素内容
-
innerText 会忽略多余的空格
-
textContent IE9+
<div class="article"> <h1>悯农</h1> <p>锄禾日当午</p> <p>汗滴禾下土</p> <p>Number盘中餐</p> <p>粒粒皆辛苦</p> </div> <script> var div=document.querySelector("div"); console.log(div.innerHTML); console.log(div.outerHTML); console.log(div.innerText); console.log(div.textContent); </script>
3、作为Text节点操作(了解)
- 文本节点的方法
- appendData()向文本节点追加内容
- deleteData()删除文本节点的一部分内容
- insertData()向文本节点中插入内容
- replaceData()替换内容
- substringData()截取内容
- 创建文本节点
- document.createTextNode()
六、元素操作（节点）
1、创建元素
-
document.createElement(tagName)
function addImage(){ //创建元素 var newImage=document.createElement("img"); newImage.src="../images/4.jpg"; //给某个元素追加子节点 boxEle.appendChild(newImage); }
2、添加元素（给父元素添加子元素）
-
appendChild(node)
-
insertBefore(newNode, oldNode)
function insertImage(){ //创建元素 var newImage=document.createElement("img"); newImage.src="../images/4.jpg"; //插件的指定位置 boxEle.insertBefore(newImage,document.querySelector("#box img:nth-of-type(3)")); }
3、删除元素
-
removeChild(node)
function deleteImage(){ var imgs=document.querySelectorAll("#box img"); for(var i=0;i<imgs.length;i++){ if(imgs[i].className === "current"){ boxEle.removeChild(imgs[i]); } } }
4、替换元素
-
replaceChild(newNode, oldNode)
function replaceImage(){ var newImage=document.querySelector("#newImage"); var imgs=document.querySelectorAll("#box img"); for(var i=0;i<imgs.length;i++){ if(imgs[i].className === "current"){ boxEle.replaceChild(newImage.cloneNode(),imgs[i]); } } }
5、克隆节点
-
cloneNode(false)
//给img元素添加 单击事件 boxEle.onclick=function(ev){ var e=ev || window.event; if(e.target.nodeName.toLowerCase() === "img"){ e.target.classList.toggle("current"); } } document.body.appendChild(boxEle.cloneNode(true));
七、元素的尺寸大小
1、元素的位置
-
getBoundingClientRect()返回对象 包含位置信息 大小信息
console.log(boxEle.getBoundingClientRect().left); console.log(boxEle.getBoundingClientRect().top); -
offsetLeft/offsetTop距离左边/上面的距离, 相对规则同 css 的定位
console.log(boxEle.offsetLeft); console.log(boxEle.offsetTop); -
clientLeft/clientTop没卵用 就是边框宽
-
offsetParent得到第一定位的祖先元素
2、元素的尺寸
-
getBoundingClientRect()
console.log(boxEle.getBoundingClientRect().width); console.log(boxEle.getBoundingClientRect().height); -
offsetWidth/offsetHeight
console.log(boxEle.offsetWidth); console.log(boxEle.offsetHeight); -
clientWidth/clientHeight
-
scrollWidth/scrollHeight
-
getClientRects()
console.log(boxEle.getClientRects());
3、滚动距离
- scrollLeft
- scrollTop
八、docuemnt
1、属性
-
URL 只读
-
domain 获取域名只读
-
referrer 获取上一个页面的地址 只读
-
lastModified 文档的最后一次修改时间 只读
-
location 对location对象引用
-
title 文档标题
<script> console.log(document); console.log(document.URL);//只读 console.log(document.domain);//只读 console.log(document.referrer);//只读 console.log(document.lastModified);//只读 console.log(document.title); document.title="你有一条新消息" </script>
标题滚动
<script>
document.title="您有一条新消息【你家发大水了，您的电脑被冲走了】";
setInterval(function(){
document.title=document.title.substr(1)+document.title.charAt(0);
},300)
</script>
2、方法
- write()
- writinln()
九、表单DOM
1、Form元素
- submit()
- reset()
- elements
2、按钮(submit reset button)
- click()
- blur()
- focus()
3、单选/复选
- click()
- blur()
- focus()
4、文本(input textarea)
- blur()
- focus()
- select()
5、select
-
add() 新增选项
<body> <form action="http://www.so.com/s" name="myForm"> <input type="txt" name="wd"> <select name="" id=""> <option value="">1</option> <option value="">2</option> </select> <br> <textarea name="" id="" cols="30" rows="10"></textarea> </form> <button onclick="submitForm()" id="btn">提交</button> <button onclick="selectText()">选中</button> <script> console.log(document.myFom.elements); function submitForm(){ document.myForm.submit(); } function selectText(){ document.myForm.elements[2].select(); } document.myForm.elements[0].focus(); </script> </body>
十、HTML DOM
1、Select
- 属性options
- 方法add()
- 方法remove()
小实例
<head>
<meta charset="UTF-8">
<title>HTML DOM select/option</title>
<style>
select{
width: 120px;
height: 200px;
}
</style>
</head>
<body>
<select id="leftSelect" multiple>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
<option>重庆</option>
<option>成都</option>
<option>武汉</option>
</select>
<button onclick="addOption()">添加</button>
<button onclick="deleteOption()">删除</button>
<button onclick="moveToRight()"> >> </button>
<select id="rightSelect" multiple></select>
<script>
var leftSelect=document.querySelector("#leftSelect");
var rightSelect=document.querySelector("#rightSelect");
function addOption(){
var newOption=new Option("南京");
leftSelect.add(newOption);
}
function deleteOption(){
for(var i=0;i<leftSelect.options.length;i++){
if(leftSelect.options[i].selected){
leftSelect.remove(i);
i--;
}
}
}
function moveToRight(){
for(var i=0;i<leftSelect.options.length;i++){
if(leftSelect.options[i].selected){
leftSelect.options[i].selected=false;
rightSelect.add(leftSelect.options[i]);
i--;
}
}
}
</script>
</body>
</html>
十一、Table
1、属性
- rows 行数组
- cells 单元格数组
2.方法
- createCaption()为表格创建一个 caption 元素。
- deleteCaption() 从表格删除 caption 元素以及其内容
- createTHead() 在表格中创建一个空的 tHead 元素
- deleteTHead()
- createTFoot() 在表格中创建一个空的 tFoot 元素
- deleteTFoot()
- insertRow() 添加一个tr
- deleteRow(index) 删除一行
十二、tr
1、属性
- rowIndex 返回该行在表中的位置
- cells 返回包含行中所有单元格的一个数组
2、方法
insertCell() 在一行中的指定位置插入一个空的 元素
deleteCell() 删除行中的指定的单元格
td th属性
- cellIndex 返回单元格在某行的单元格集合中的位置
