dom

1.定义

DOM(文档对象模型)是针对HTML和XML文档的一个API,通过DOM可以去改变文档。将整个文档(XML文档和HTML文档)看成一个树形结构,并用document对象表示该文档。文档中的每个成分都是一个节点(Node)。

2.节点类型

文档节点(Document):代表整个文档
元素节点(Element):文档中的一个标记      属性节点(Attr):代表一个属性,元素才有属性
文本节点(Text):标记中的文本

3.js对象节点属性

nodeType 返回节点类型的数字值(1~12)
nodeName 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document
nodeValue 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null
parentNode 父节点
parentElement 父节点标签元素
childNodes 所有子节点
children 第一层子节点
firstChild 第一个子节点,Node 对象形式
firstElementChild 第一个子标签元素
lastChild 最后一个子节点
lastElementChild 最后一个子标签元素
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟标签元素
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟标签元素
childElementCount 第一层子元素的个数(不包括文本节点和注释)
ownerDocument 指向整个文档的文档节点

4.节点方法

hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系

5.选择器

getElementById()

一个参数:元素标签的ID
getElementsByTagName() 一个参数:元素标签名
getElementsByName() 一个参数:name属性名
getElementsByClassName() 一个参数:包含一个或多个类名的字符串

classList

返回所有类名的数组

  • add (添加)
  • contains (存在返回true,否则返回false)
  • remove(删除)
  • toggle(存在则删除,否则添加)
querySelector() 接收CSS选择符,返回匹配到的第一个元素,没有则null
querySelectorAll() 接收CSS选择符,返回一个数组,没有则返回[]

6.style操作方法

style.cssText 可对style中的代码进行读写
style.item() 返回给定位置的CSS属性的名称
style.length style代码块中参数个数
style.getPropertyValue() 返回给定属性的字符串值
style.getPropertyPriority() 检测给定属性是否设置了!important,设置了返回"important";否则返回空字符串
style.removeProperty() 删除指定属性
style.setProperty()

设置属性,可三个参数:设置属性名,设置属性值,是否设置为"important"(可不写或写"")

 

.className:为元素设置一个新的clas名字; div1.className="class1";
.style:为元素设置新的样式,注意驼峰命名法; div1.style.backgroundColor="red";
.style.cssText:为元素同时修改多个样式; div1.style.cssText="width:100px;height:100px";

 

7.元素节点属性及方法

nodeName 访问元素的标签名
tagName 访问元素的标签名
createElement() 创建节点
appendChild() 末尾添加节点,并返回新增节点
insertBefore() 参照节点之前插入节点,两个参数:要插入的节点和参照节点
insertAfter() 参照节点之后插入节点,两个参数:要插入的节点和参照节点
replaceChild() 替换节点,两个参数:要插入的节点和要替换的节点(被移除)
removeChild() 移除节点
cloneNode() 克隆,一个布尔值参数,true为深拷贝(当前节点和所有子节点),false为浅拷贝
importNode() 从文档中复制一个节点,两个参数:要复制的节点和布尔值(是否复制子节点)
insertAdjacentHTML()

插入文本,两个参数:插入的位置和要插入文本

  • "beforebegin",在该元素前插入
  • "afterbegin",在该元素第一个子元素前插入
  • "beforeend",在该元素最后一个子元素后面插入
  • "afterend",在该元素后插入

 

8.属性节点

attributes

获取所有标签属性
getAttribute() 获取指定标签属性
setAttribute() 设置指定标签属
removeAttribute() 移除指定标签属

var s = document.createAttribute("age")

s.nodeValue = "18"

创建age属性

设置属性值为18

9.文本节点

innerText 所有的纯文本内容,包括子标签中的文本
outerText 与innerText类似
innerHTML 所有子节点(包括元素、注释和文本节点)
outerHTML 返回自身节点与所有子节点
textContent 与innerText类似,返回的内容带样式
data 文本内容
length 文本长度
createTextNode() 创建文本
normalize() 删除文本与文本之间的空白
splitText() 分割
appendData() 追加
deleteData(offset,count) 从offset指定的位置开始删除count个字符
insertData(offset,text) 在offset指定的位置插入text
replaceData(offset,count,text) 替换,从offset开始到offscount处的文本被text替换
substringData(offset,count) 提取从ffset开始到offscount处的文本

10.文档节点

document.documentElement 代表页面中的<html>元素
document.body 代表页面中的<body>元素
document.doctype 代表<!DOCTYPE>标签
document.head 代表页面中的<head>元素
document.title 代表<title>元素的文本,可修改
document.URL 当前页面的URL地址
document.domain 当前页面的域名
document.charset 当前页面使用的字符集
document.defaultView 返回当前 document对象所关联的 window 对象,没有返回 null
document.anchors 文档中所有带name属性的<a>元素
document.links 文档中所有带href属性的<a>元素
document.forms 文档中所有的<form>元素
document.images 文档中所有的<img>元素
document.readyState 两个值:loading(正在加载文档)、complete(已经加载完文档)
document.compatMode

两个值:BackCompat:标准兼容模式关闭、CSS1Compat:标准兼容模式开启

write()、writeln()、

open()、close()

write()文本原样输出到屏幕、writeln()输出后加换行符、

open()清空内容并打开新文档、close()关闭当前文档,下次写是新文档

11.表格

【表格对象】
1、rows属性:返回表格中的所有行,数组;
2、insertRow(index):在表格的第index+1行,插入新行;
3.deleteRow():删除表格的第index+1行;
【表格行对象】:
  1、cells属性:返回表格中的所有行,数组;
  2、rowIndex:返回当前行,在表格中的索引顺序,从0开始;
  3、indexCell(index):在表格的第index+1处插入一个<td>;
  4、deleteCell(index):删除当前行的第index+1个<td>;
【表格的单元格对象】:
  1.cellIndex属性:返回单元格在该行的索引顺序,从0开始;
  2、innerHTML属性:返回或设置当前单元格中的HTML代码;
  3、align属性:设置当前单元格的水平对齐方式;
  4、claaName属性:设置单元格的class属性;
例子:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM操作表格</title>
        
        <script type="text/javascript">
            
            //表格对象:
            //1、rows属性:返回表格中的所有行,数组;
            //2、insertRow(index):在表格的第index+1行,插入一个新行;
            //3、deleteRow(index):删除表格的第index+1行;
            
            //表格的行对象:
            //1、cells属性:返回当前行中的所有单元格,数组;
            //2、rowIndex属性:返回当前行在表格中的索引顺序,从0开始;
            //3、insertCell(index):在当前行的index+1处插入一个td;
            //4、deleteCell(index):删除当前行的第index+1个td;
            
            //表格的单元格对象:
            //1、cellIndex属性:返回单元格在该行的索引顺序,从0开始;
            //2、innerHTML属性:设置或者返回当前单元格中的HTMl代码;
            //3、align(valign)属性:设置当前单元格的水平对齐方式;
            //4、className属性:设置单元格的class名称。
            
            function newRow(){
                
                var book = prompt("书名:");
                var price = prompt("价格:");
                
                var table = document.getElementsByTagName("table");
                //在表格的最后一行插入一个新行
                var newRow = table[0].insertRow(table[0].rows.length-1);
                //给新行设置单元格
                var cell0 = newRow.insertCell(0);
                cell0.innerHTML = book;
                var cell1 = newRow.insertCell(1);
                cell1.innerHTML = price;
                
                getSum();
                
            }
            
            function deleteRow(){
                
                var table = document.getElementsByTagName("table");
                if(table[0].rows.length>2){
                    table[0].deleteRow(table[0].rows.length-2);
                }else{
                    alert("删删删!删你妹啊删!")
                }
                getSum();
            }
            
            function changeTitle(){
                
                var color = prompt("请输入6位十六进制颜色值:");
                var table = document.getElementsByTagName("table");
                table[0].rows[0].style = "background-color:#"+color;
                
            }
            
            function copyRow(){
                
                var table = document.getElementsByTagName("table");
                var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
                var heJi = table[0].rows[table[0].rows.length-1];
                //由于浏览器,自动将表格的<tr>包裹在<tbody>中
                //所以<tr>实际并非<table>的子节点,故需取到<table>中的<tbody>进行插入;
                
                if(table[0].rows.length>2){
                    table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
                }else{
                    alert("没有可以复制的行");
                }
                getSum();
            }
            
            function getSum(){
                //取到当前表格 表格所有行
                var table = document.getElementsByTagName("table");
                var rows = table[0].rows;
                //
                if(rows.length<=2){
                    rows[rows.length-1].cells[1].innerText = 0 + "元";
                    alert("没有可计算的行!");
                    return;
                }
                //求和
                var sum = 0 ;
                
                for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1  rows.length-2
                    
                    var cells = rows[i].cells;//取到单元格
                    sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的  内容(innerText) 转化成数字并求和计算!
                    
                }
                
                rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
                
            }
            
            window.onload = function(){
                getSum();
            }
            
            
        </script>
        
        <style type="text/css">
            
            table{
                border-collapse: collapse;
                width: 400px;
                text-align: center;
                color: #585858;
            }
            td,th{
                border: 1px solid #8B8A8B;
            }
            table tr:last-child{
                color: #E70014;
            }
            
        </style>
        
    </head>
    <body>
        
        
        <table>
            <tr>
                <th>书名</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>看得见风景的房间</td>
                <td>30.00元</td>
            </tr>
            <tr>
                <td>幸福从天而降</td>
                <td>18.50元</td>
            </tr>
            <tr>
                <td>60个瞬间</td>
                <td>32.00元</td>
            </tr>
            <tr>
                <td>合计</td>
                <td></td>
            </tr>
        </table>
        
        <br />
        
        <button onclick="newRow()">增加一行</button>
        <button onclick="deleteRow()">删除最后一行</button>
        <button onclick="changeTitle()">修改标题样式</button>
        <button onclick="copyRow()">复制最后一行</button>
        

    </body>
</html>

  

alt属性只能用在img、area和input元素中

 

posted @ 2018-09-26 12:53  justSmile2  阅读(252)  评论(0编辑  收藏  举报