01-DOM(节点内容操作)

DOM操作一

HTML DOM是HTML Document Object Model(文档对象模型)的缩写

HTML DOM则是专门适用于HTML/XHTML的文档对象模型。

熟悉软件开发的人员可以将HTML DOM理解为网页的API。

它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言(js)获取或者编辑。

例如Javascript就可以利用HTML DOM动态地修改网页。

事件

事件源、事件、事件驱动程序。

事件源 ：要触发的对象 （一般是名词，事件发起者，比如开关按钮）

事件：怎么触发这个事情 （一般是动词，触发事件，比如点击开关）

事件处理程序:发生了什么事情 （处理结果，比如灯亮了）

js做什么：获取事件源、绑定事件、书写事件驱动程序

常用事件:

• 属性	当以下情况发生时，出现此事件
  onabort	图像加载被中断
  ==onblur==	元素失去焦点
  ==onchange==	用户改变域的内容
  ==onclick==	鼠标点击某个对象
  ondblclick	鼠标双击某个对象
  onerror	当加载文档或图像时发生某个错误
  ==onfocus==	元素获得焦点
  onkeydown	某个键盘的键被按下
  onkeypress	某个键盘的键被按下或按住
  onkeyup	某个键盘的键被松开
  ==onload==	某个页面或图像被完成加载
  onmousedown	某个鼠标按键被按下
  onmousemove	鼠标被移动
  onmouseout	鼠标从某元素移开,支持冒泡
  onmouseover	鼠标被移到某元素之上,支持冒泡
  onmouseup	某个鼠标按键被松开
  onreset	重置按钮被点击
  ==onresize==	窗口或框架被调整尺寸
  onselect	文本被选定
  onsubmit	提交按钮被点击
  onunload	用户退出页面
  ==onscroll==	元素滚动条在滚动时触发。
  ==onmouseenter==	某个鼠标按键被按下,不支持冒泡
  ==onmouseleave==	在鼠标指针移出元素上时触发,不支持冒泡
  onmousewheel	当鼠标滚轮正在被滚动时触发

DOM

dom元素指的是页面的标签,

通过任意一个dom元素的关系可以找到当前页面其他任意的一个dom.

DOM的获得

ID选择器

• Idocument.getElementById("demo");
• 最准确的 需要获取的dom元素，必须有id
• 而且一个页面不能有重复的id

标签选择器

• document.getElementsByTagName("div");
• 没办法定位元素
• ==本质是数组类型==,需要通过下标选定标签
  • document.getElementsByTagName("div")[0];

class选择器

• document.getElementsByClassName("a");
• 如果在移动使用，移动端浏览器完全支持。
• ie6,7,8不支持! 而且ie8不支持console.log
• ==本质是数组类型==,需要通过下标选定标签
  • document.getElementsByClassName("a")[0];

NODE节点

node节点指的是页面的任意元素,

标签 换行符 注释 空格 属性 标签内容等都可以被当做node节点,

当然既然是节点,也是可以被js选中的,因此可以通过DOM节点之间的相对关系对它们进行访问。

node节点的访问关系

• ==以属性的方式存在的==。 A.parent a.parent();

• 选定节点后,可以将标签中的属性用javascript的中.(点)的方法调用

  • //点击div元素,使其变为红色,通过元素的style属性使其变色
    //在js中操作css中的属性,一般会把abc-xx转换为abcXx 驼峰命名法
    //background-color ==> backgroundColor
    div.onclick = function(){
                pNode.style.backgroundColor = 'red';
            }
    

parentNode 父节点

调用者就是节点,一个节点只有一个父节点。

调用方式就是节点.parentNode.

• dom.parentNode ==> 通过dom获取其父类节点.

  •  // 通过下标获取子元素标签
        var boxItem = document.getElementsByClassName('innerBox')[0];
        // api:  dom.parentNode  ==> 通过dom获取其父类节点.
        //通过子元素标签利用.parentNode,获取父元素
        var box = boxItem.parentNode;
    

兄弟节点

调用者是节点。（存在浏览器兼容问题）

IE678中指下一个(上一个)元素节点（甚至包括标签、注释）。

在火狐谷歌IE9+(标准)以后都指的是下一个(上一个)节点（包括空文档和换行节点）。

nextSibling 下一个元素节点

• 火狐谷歌IE9+(标准)以后包括空文档和换行节点,导致出错
• 新标准: nextElementSibling 用于火狐谷歌IE9+(标准)以后版本
• 兼容写法: box =this.nextElementSibling || this.nextSibling

previousSibling 上一个元素节点

• 同上
• 新标准: previousElementSibling 用于火狐谷歌IE9+(标准)以后版本
• 兼容写法: box =this.previousSibling || this.previousElementSibling

子节点

单个子节点

firstChild: 调用者是父节点。

• IE678中指第一个子元素节点(标签)
• 在火狐谷歌IE9+以后都指的是第一个节点（包括空文档和换行节点）。
• 新标准: firstElementChild: 用于火狐谷歌IE9+(标准)以后版本

lastChild: 调用者是父节点。

• IE678中指最后一个子元素节点（标签）
• 在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
• 新标准: lastElementChild: 用于火狐谷歌IE9+(标准)以后版本

所有子节点

childNodes: 调用者是父节点。

• 它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
• 火狐 谷歌等高本版会把换行也看做是子节点
• 常用: children：非标准属性，它返回指定元素的子元素集合,只返回HTML节点，甚至不返回文本节点,几乎所有浏览器都支持。IE6/7/8中包含注释节点

区分不同类型的节点

nodeType:

• 属性可用来区分不同类型的节点,比如 元素, 文本 和 注释,可用来兼容ie8以下的浏览器
• nodeType == 1 表示的是元素节点 记住 元素就是标签
• nodeType == 2 表示是属性节点 已弃用
• nodeType == 3 是文本节点 了解
• nodeType == 8 注释 了解

处理兼容问题:

// 封装好的兼容ie8和标准浏览器的获取孩子节点的方法
function myChildren(node){
    var myChildrenArr = [] ;
    var childrenArr = node.children; //拿到的是node的所有的孩子节点，包括ie中的注释节点
    for(var n in childrenArr){
        if(childrenArr[n].nodeType == 1){   //选择出所有的标签节点
            myChildrenArr.push(childrenArr[n]);
        }
    }
    return myChildrenArr;
}   

DOM节点操作:

增删改查 CURD create update read delete

创建节点

createElement()

• var pEle = document.createElement('img'); 创建一个img标签节点

插入节点

appendChild()

• div.appendChild(pEle); 插入img标签节点,到div里

insertBefore()

• div.insertBefore(img,span) ;将img标签放到 div下的span上面

删除节点

removeChild()

• div.removeChild('img'); 删除div下的img标签

克隆节点

cloneNode(true)

• var div = oldNode.cloneNode(true);如果没有true为浅克隆,不包括div下的子元素

    
    


    

        
    
    删除img2图片
    clone box
    

节点属性

获取调用它的元素的某个属性的值

getAttribute()

• this.getAttribute('class'); 获取调用它的元素的class的值

设置调用它的元素的某个属性的值

setAttribute()

• div.setAttribute("style", "background-color: pink;");将div的style属性里的背景设置为pink

删除调用它的元素的某个属性的值

removeAttribute()

• div.removeAttribute('id');删除div的id属性

内容操作

设置输入框的初始值

.value

• inputEl.value = Math.floor(Math.random()(100-1)+1);* 将inputEl指向的输入框里面添加一个(1~100)的随机数

在节点中添加文本

.innerText

• 可读写

• div.innerText = '只是文字不能html解析'; 在div中添加文字内容;

在节点中添加HTML代码

.innerHTML

• 可读写

• div.innerHTML = '

  我是h1标签

  '; 在div中添加文字内容;