JavaScript-11(DOM文档对象模型)
一、节点
1.节点分类
- document ： 文档节点
nodeType9 - element ：元素节点
nodeType1 - attr ： 属性节点
nodeType2 - text ： 文本节点
nodeType3 - comment ： 注释节点
nodeType8
2.节点属性
- nodeName 节点名字 元素的nodeName是标签名
- document : #document
- element : 标签名
- attr : 属性名
- text : #text
- comment : #comment
- nodeValue 节点值
- document : null
- element : null
- attr : 属性值
- text : 文本内容
- comment : 注释内容
- nodeType 节点类型
-
document : 9
-
element : 1
-
attr : 2
-
text : 3
-
coment : 8
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点 node</title> </head> <body> <!-- 哈哈哈 我是注释 --> <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1505/01/c12/6225095_1430488604728.jpg" width="300" alt="" id="myImg"> <p id="myP"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium a, ipsum iste labore libero reprehenderit illo et, consequuntur quaerat dolorem alias, ea, adipisci dignissimos accusantium illum at. Soluta, sint. </p> <script> //获取元素 var ele=document.getElementById("myImg"); /*节点名*/ console.log("nodeName: "+ele.nodeName); /*节点值 元素节点没有节点值*/ console.log("nodeValue: "+ele.nodeValue); /*节点类型 返回数字1*/ console.log("nodeType: "+ele.nodeType); /*dir 专门看对象*/ console.dir(ele); console.log("Element:"+ele); /*属性节点 通过元素节点 获取属性节点*/ var attr=ele.getAttributeNode("src"); console.dir(attr); console.log(attr); console.log("nodeName: "+attr.nodeName); console.log("nodeValue: "+attr.nodeValue); /*所有的元素都是1 所有的属性节点都是2*/ console.log("nodeType: "+attr.nodType); //2 console.log(""); /*文本节点 节点是对象类型*/ var p=document.getElementById("myP"); var txtNode=p.firstChild; console.dir(txtNode); console.log("nodeName: "+txtNode.nodeName); console.log("nodeValue: "+txtNode.nodeValue); console.log("nodeType: "+txtNode.nodeType);//3 console.log(""); /*注释节点*/ var comment=document.body.firstChild; console.dir(comment); console.log("nodeName: "+comment.nodeName); console.log("nodeValue: "+comment.nodeValue); console.log("nodeType: "+comment.nodeType);//8 console.log(""); /*document节点 document不是元素*/ console.dir(document); console.log("nodeName: "+document.nodeName); console.log("nodeValue: "+document.nodeValue); console.log("nodeType: "+document.nodeType);//9 </script> </body> </html>
-
二、 从HTML获取元素
1.通过ID
- document.getElementById()
- 一个元素具有ID属性，会自动生成与之同名的全局变量
2.通过Name属性
- getElementsByName()
- IE9+ 所有的元素都有name属性
- IE9- 个别元素有name属性
- 表单和表单控件
- img iframe embed object ....
- docuemnt会为某些元素创建以元素name为名字的属性
<form><img>- ...
3.通过标签名选择器
- document.getElementsByTagName()
- element.getElementByTagName()
- docuemnt.images 页面中所有img的集合（引用）
- document.links 所有超链接（有href属性）的集合
- document.anchors 所有锚点（有name属性）的集合
- document.forms 所有表单的集合
4.通过class类名
- document.getElementsByClassName()
- element.getElementsByClassName()
- IE9+
5.通过选择器选择元素
- document.querySelector() 选择满足条件的第一个
- document.querySelectorAll() 选择所有满足条件的
- element.querySelector() 选择满足条件的第一个
- element.querySelectorAll() 选择所有满足条件的
- IE8+
6.document.all
-
文档中所有的元素集合 页面中所有的标签
-
可用于判断浏览器是否为IE(在非IE下document.all值为false)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取文档元素</title> <style> .box{ display:inline-block; width: 200px; height: 200px; border:1px solid orange; } </style> </head> <body> <div id="box01" class="box"></div> <div id="box02" class="box" name="lili"></div> <div id="box03" class="box" name="lili"></div> <div id="box04" class="box"></div> <div id="box51" class="box"></div> <script> /*1.如果一个元素设置了ID.系统会生成与id同名的全局变量 id 名不能重复*/ box01.style.backgroundColor="pink"; /*2.通过name属性的值 才获取元素 IE9以上和标准浏览器认为 所有的元素都有name*/ var eles=document.getElementsByName("lili"); console.log(eles); // eles.style.backgroundColor="#369"; /*4.通过class类型*/ var eles=document.getElementsByClassName("box"); console.log(eles); eles[3].style.backgroundColor="green"; /*5.通过选择器 选择所有满足条件的*/ 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); console.log(""); /*第一个满足条件的*/ var ele=document.querySelector(".box"); console.log(ele); /*页面中所有的标签*/ console.log(document.all); </script> </body> </html>
三、 文档节点的结构和遍历
1.节点的关系
- 父节点 父元素
- 子节点 子元素
- 兄弟节点 兄弟元素
- 祖先节点 祖先元素
- 后代节点 后代元素
2.节点相关属性（作为节点树的文档）
- parentNode 父节点
- childNodes 所有子节点的集合
- firstChild 第一个子节点
- lastChild 最后一个子节点
- nextSibling 下一个兄弟节点
- previousSibling 上一个兄弟节点
3.元素相关操作（作为元素树的文档）
-
parentElement 父元素
- 大部分情况下 parentElement 等同于 parentNode
-
children 所有子元素的集合
-
firstElementChild IE9+ 第一个子元素
-
lastElementChild IE9+ 最后一个子元素
-
nextElementSibling IE9+ 下一个兄弟元素
-
previousElementSibling IE9+ 上一个兄弟元素
-
childElementCount IE9+ 子元素的数量
-
ownerDocument IE9+ 返回元素所属的文档对象（祖先节点）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档的节点结构</title> </head> <body> <div> <ul id="myList"><li>小丽丽1</li> <li>小丽丽2</li> <li id="myItem">小丽丽3</li> <li>小丽丽4</li> <li>小丽丽5</li> <!-- 哈哈哈 --> </ul> </div> <script> var ulEle=document.querySelector("ul"); /** * 得到类数组对象： * 一个元素的子节点包含（元素、文本、注释节点）不可能包含document节点 * document是所有元素的祖先节点 * 属性节点不是该元素的子节点 * 子节点 集合（包括空格符 文本节点text） */ console.log(ulEle.childNodes); /** * 第一个子节点 * 最后一个子节点 */ console.log(ulEle.firstChild); console.log(ulEle.lastChild); /** * 获取ul的第三个子节点 */ console.log(ulEle.childNodes[4]); /** * 获取父节点 * 获取父节点的父节点 */ console.log(ulEle.parentNode); console.log(ulEle.parentNode.parentNode); /** * 获取下一个兄弟节点 * 获取上一个兄弟节点 */ var li=document.querySelector("#myItem"); console.log(li); console.log(li.nextSibling); console.log(li.previousSibling); </script> </body> </html>
四、 属性
1.内置属性
- js对象和html标签有映射关系
2.自定义属性的操作（获取和设置非标准的HTML属性）
- getAttribute(attrname) 获取自定义或内置属性的值
- setAttribute(attrname,value) 设置自定义或内置属性
- hasAttribute(attrname) 判断是否存在该属性
- removeAttribute() 移出自定义或内置的属性
3.H5新增的自定义属性操作操作
- HTML：
<tag data-attr=""> - JS ： element.dataset.attr
4.把属性当做属性节点（作为Attr节点的属性 ）
- getAttributeNode(attrname) 返回节点对象（不再是值了）
- setAttributeNode() 只有一个参数（属性节点对象）
- document.createAttribute() 创建属性节点(不属于任何一个元素，需要用setAttributeNode()添加给一个指定的元素)
五、元素的内容
1.作为HTML的元素内容
- innerHTML
- outerHTML
2.作为纯文本的元素内容
-
innerText 只有文字 会忽略多余的空格（没有样式）
-
textContent IE9+ 没有忽略制表符（保持样式）
<body> <div class="article"> <h1></h1> <h1>锄禾</h1> <p>锄禾日当午</p> <p>汗滴禾下土</p> <p>Number盘中餐</p> <p>粒粒皆辛苦</p> </div> <script> var div=document.querySelector("div"); /** * 显示div里面的部分 有标签（不包含div） */ console.log(div.innerHTML); /** * 显示整个div的内容 有标签(包含div) */ console.log(div.outerHTML); /** * 仅仅显示文本内容（文字）且会忽略制表符 不保留原本的样式 类似没加pre */ console.log(div.outerText); /** * 仅仅显示文本内容（文字）且不会忽略制表符 保留原本的样式 类似加了pre */ console.log(div.textContent); </script> </body>
3.作为Text节点的元素内容
-
文本节点的方法
- appendData() 向文本节点追加内容
- deleteData() 删除文本节点的一部分内容
- insertData() 向文本节点中插入内容
- replaceData() 替换内容
- substringData() 截取内容
-
创建文本节点
- document.createTextNode()
六、元素操作（创建\插入\删除节点）
1.创建元素节点
- document.createElement(tagName)
2.添加元素（给父元素添加子元素）（插入节点）
- appendChild(node) 在元素的最后追加一个子元素
- insertBefore(newNode, oldNode) 在元素指定的位置插入一个子元素
3.删除元素（节点）
- removeChild(要删除的node) 父元素来调用(参数是个节点)
4.替换元素（节点）
- replaceChild(newNode, oldNode)父元素来调用
5.克隆节点
- cloneNode(false/true)
-
true 克隆元素以及所有的子节点
-
false 仅仅克隆节点本身（默认）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点操作</title> <style> #box{ width:800px; padding:20px; border:5px solid #ccc; overflow: hidden; } #box img{ box-sizing: border-box; width:200px; height:200px; } #box img.current{ border:2px solid red; } </style> </head> <body> <button onclick="addImg()">添加元素</button> <button onclick="insertImg()">插入元素</button> <button onclick="delImg()">删除元素</button> <button onclick="repImg()">替换节点</button> <div id="box"> <img src="http://img0.imgtn.bdimg.com/it/u=3121973696,2340997418&fm=27&gp=0.jpg" alt=""> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3577784738,4111720376&fm=111&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=3121973696,2340997418&fm=27&gp=0.jpg" alt=""> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3577784738,4111720376&fm=111&gp=0.jpg" alt=""> <img src="http://img0.imgtn.bdimg.com/it/u=3121973696,2340997418&fm=27&gp=0.jpg" alt=""> </div> <img src="../../dist/images/5.jpg" alt="" id="newImage"> <script> var boxEle = document.querySelector("#box"); /**添加元素*/ function addImg(){ //创建元素 var newImage = document.createElement("img"); newImage.src = "../../dist/images/4.jpg"; //给某个元素追加 子节点 boxEle.appendChild(newImage); } /* 插入元素*/ function insertImg(){ //创建元素 var newImage = document.createElement("img"); newImage.src = "../../dist/images/4.jpg"; //插入到指定位置 boxEle.insertBefore(newImage, document.querySelector("#box img:nth-of-type(3)")); } /**删除元素*/ function delImg(){ var imgs=document.querySelectorAll("#box img"); //遍历 for(var i=0;i<imgs.length;i++){ //被选中 if(imgs[i].className==="current"){ boxEle.removeChild(imgs[i]); } } } /*替换节点*/ function repImg(){ var newImg=document.querySelector("#newImage"); var imgs=document.querySelectorAll("#box img"); for(var i=0;i<imgs.length;i++){ //被选中 if(imgs[i].className==="current"){ /*克隆节点*/ boxEle.replaceChild(newImg.cloneNode(),imgs[i]); } } } //给 img元素 添加 单击事件 boxEle.onclick = function(ev){ var e = ev || window.event; if (e.target.nodeName.toLowerCase() === "img") { e.target.classList.toggle("current"); } } /*克隆box*/ document.body.appendChild(boxEle.cloneNode(true)); </script> </body> </html>
-
七、元素的尺寸位置滚动
1.元素的位置（坐标）
getBoundingClientRect().left/top/right/bottom 返回对象 包含位置信息 大小信息- 相对于整个页面的坐标位置
- offsetLeft/offsetTop 以第一个祖先为原点，距离左边/上边的距离, 相对规则同 css 的定位
- clientLeft/clientTop 没卵用 就是边框宽
- offsetParent 得到第一个定位的祖先元素
2.查询元素的几何尺寸
getBoundingClientRect().width/heightIE8-不支持- getClientRects()集合（内容只有一个）得到一个矩形模型
- offsetWidth/offsetHeight 属性
- clientWidth/clientHeight 属性（基本不用）
- scrollWidth/scrollHeight 属性（里面内容的宽度）
3.滚动距离
- scrollLeft
- scrollTop
4.判定某个元素在某点
- document.elementFromPoint() 不常用
八、docuemnt 对象
1.属性
-
URL 只读（获取当前页面的url）
-
domain 只读（获取域名）
-
referrer 只读（获取上一个页面的地址 只读）
-
lastModified 文档的最后一次修改时间 只读
-
location 对location对象引用
-
title 文档标题（可以改）
-
cookie
-
....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题滚动</title> </head> <body> <script> document.title = "你有一条新消息【你家发大水了，你的电脑被冲走了】"; setInterval(function(){ document.title = document.title.substr(1) + document.title.charAt(0); }, 300) </script> </body> </html>
2.方法
- write() 从页面中输出
- writinln() 每写一行自动加个换行（是换行符\n）在浏览器上只会有一个空格
九、HTML表单DOM
选取表单和表单元素
表单和表单元素的属性
1.Form元素方法
- submit()
- reset()
- elements
2.按钮(submit reset button)方法
- click() 使按钮比被单击（自动）
- blur() 使失去焦点
- focus() 获得焦点
3.单选/复选
- click() 被单击
- blur() 失去焦点
- focus() 获得焦点
4.文本(input textarea)
-
blur() 失去焦点
-
focus() 获取焦点
-
select() 全部被选中
<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()">提交</button> <button onclick="selectText()">选中</button> <script> console.log(document.myForm.elements); function submitForm(){ document.myForm.submit(); } function selectText(){ document.myForm.elements[2].select(); } /* 自动获取焦点*/ document.myForm.elements[0].focus(); //document.querySelector("#btn").click(); </script> </body>
5.select
-
属性
- options 得到option的集合
- selectedIndex
- length 选项的数量
-
方法
-
add() 添加选项
-
remove() 移出选项, 参数是option的索引
-
focus() 获取焦点
-
blur() 失去焦点
<!DOCTYPE html> <html lang="en"> <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.table
-
属性
- cells 返回包含表格中所有单元格的一个数组。
- rows 返回包含表格中所有行的一个数组。
-
方法
- createCaption() 为表格创建一个 caption 元素。（caption内容需要在后面加.innerHTML）
- deleteCaption() 从表格删除 caption 元素以及其内容。
- createTHead() 在表格中创建一个空的 tHead 元素。
- deleteTHead() 从表格删除 tHead 元素及其内容。
- createTFoot() 在表格中创建一个空的 tFoot 元素。
- deleteTFoot() 从表格删除 tFoot 元素及其内容。
insertRow(index)在表格指定位置中插入一个新行。- 其中index的值为tableEle
.rows.length
- 其中index的值为tableEle
deleteRow(index)从表格删除一行。
2.tr
-
属性
- cells 返回包含行中所有单元格的一个数组。
rowIndex返回该行在表中的位置。
-
方法
- deleteCell() 删除行中的指定的单元格。
insertCell()在一行中的指定位置插入一个空的 元素。
3.td th
- 属性
- cellIndex 返回单元格在某行的单元格集合中的位置。
