JavaScript的学习5

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript的学习5相关的知识,希望对你有一定的参考价值。

一、DOM对象

1、DOM对象:Document  Object  Model  文档对象模型,主要是用来提供了操作html文档的属性与方法

2、DOM的分类:

 

a、核心DOM:为操作XMLHTML文档的提供了属性与方法

 

b、HTML DOM:它是用来专门操作HTML文档和XHTML文档

 

c、XML DOM:它是用来专门操作XML文档的  就业班讲

 

d、CSS DOM:它是用来专门操作style这个属性

 

e、events DOM:事件DOM

二、核心DOM

1、核心DOM的属性

 

   firstChild 第一个子节点

   lastChild 最后一个子节点

 

   childNodes 子节点列表 就算里面只有一个子节点 它也是一个数组 它和数组的访问方式一样   就是通过下标来进行访问

 

   parentNode 父节点

 

   innerHTML  用来设置或者返回双边标记里面的内容

 

   nextSibling  下一个兄弟节点  

 

   previousSibling  上一个兄弟节点

 

   nodeValue 节点的值

 

   nodeName 节点的名称

2、核心DOM对标签属性的操作:增删改查

例:<table  width=”100”></table >

 

要找到操作的标签对象.setAttribute(属性名,属性值)

 

function setAttr(){
        //要找到操作标签对象.setAttribute();
        document.getElementById("table").setAttribute("width",500);
        document.getElementById("table").setAttribute("border",5);
        document.getElementById("table").setAttribute("bgColor","#f00");
    }

 

要找到操作的标签对象.getAttribute(属性名)

 

function getAttr(){
        //要找到操作的标签对象.getAttribute(属性名)
        alert(document.getElementById("table").getAttribute("width"));
    }

 

要找到操作的标签对象.removeAttribute(属性名)

 

function removeAttr(){
        //要找到操作的标签对象.removeAttribute(属性名)
        document.getElementById("table").removeAttribute("width");
        document.getElementById("table").removeAttribute("border");
        document.getElementById("table").removeAttribute("bgColor");
    }

 

3、核心DOM对标签的操作

创建标签:document.createElement(“标签名”)

追加标签:父对象.appendChild(要追加的标签对象)  ;           将标签对象追加父对象的末尾

 

 

 

 

 

 

     父对象.insertBefore(要追加的标签对象, 在谁之前进行追加);  将标签对象追加谁的最前面

移除标签:父对象.removeChild(要删除的标签对象)

三、HTML DOM

 

document.getElementById(ID的属性值)  作用:通过id的属性值来获取标签对象

 

document.getElementsByTagName(“标签名”)  作用:通过标签名来获取对象

document.getElementsByName(name的属性值)  通过标签中的Name的属性值来获取元素

四、CSS DOM

 

CSS DOM它是用来操作标签的style属性的  这里的style它也是一个对象

 

格式:

 

赋值:  要操作标签对象.style.css样式属性 = CSS属性值”

 

取值:  要操作标签对象.style.css样式属性

五、事件

1、事件绑定的方式

 

行内绑定:<标签 事件名=“事件的处理程序”></标签>    将事件的处理程序是写在HTML标签中

动态绑定:要操作的标签对象.事件名 = 事件的处理程序    将事件的处理程序是写在JS代码中

2、事件列表

 

onclick:当鼠标单击时

 

ondblclick:当鼠标双击时

 

onmouseover:当鼠标经过时

 

onmouseout:当鼠标离开时

 

onfocus:当获取光标焦点时

 

onblur:当失去焦点时

 

onsubmit:当表单提交时  这个事件它是给form标签来绑定的

 

onchange:当内容发生改变时  多用于下拉列表

 


以上是关于JavaScript的学习5的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript - 代码片段,Snippets,Gist

JavaScript 片段

jQ选择器学习片段(JavaScript 部分对应)

学习 PyQt5。在我的代码片段中找不到错误 [关闭]

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象