DOM属性的增删改、属性的其他操作及DOM事件

一、BOM属性的增删改

Ⅰ、获取标签document.getElementById()

Ⅱ、获取属性值

方法一：document.write(inObj.value);

方法二：document.write(inObj.getAttribute(“value”));

Ⅲ、设置属性值

方法一：inObj.value=”hello”;

方法二：inObj.setAttribute(“value”, “Django”);

Ⅳ、添加属性document.createAttribute(“class”);

Ⅴ、删除属性inObj.removeAttribute(“name”);

<!DOCTYPE html>

<head>

<title>DOM 属性相关操作</title>

</head>

<body>

// 1、获取标签

var inObj = document.getElementById("inputid");

document.write("<br/>");

// 2、获取属性值方法一

document.write(inObj.value);

document.write("<br/>");

// 获取属性值方法二

document.write(inObj.getAttribute("value"));

document.write("<br/>");

// 3、设置属性值

// 方法一

// inObj.value="hello";

// document.write(inObj.value);

// document.write("<br/>");

// 方法二

// inObj.setAttribute("value", "Django");

// document.write(inObj.value);

//document.write("<br/>");

// 4、添加属性

// 创建属性节点

var attrObj = document.createAttribute("class");

// 与input标签建立联系

//inObj.appendChild(attrObj);

document.write("<br/>");

// 5、删除属性

document.write(inObj.getAttribute("name"));

inObj.removeAttribute("name");

document.write("<br/>");

document.write(inObj.getAttribute("name"));

</script>

</body>

</html>

二、DOM属性的其他常用操作

Ⅰ、标签节点

nodeName返回标签名，nodeType返回整型1，nodeValue返回null

Ⅱ、属性节点

nodeName返回属性名，nodeType返回整型2，nodeValue返回属性值

Ⅲ、文本节点

nodeName返回#text，nodeType返回整型3，nodeValue返回文本本身

<!DOCTYPE html>

<head>

</head>

<body>

<span id="span_id"> Hello Django </span>

<br/>

元素节点 /属性节点 /文本节点

nodeName: 返回标签名 /属性名 /#text

nodeType: 1 /2 /3

nodeValue: null /属性值 /文本本身

// 1、标签节点

var eleObj = document.getElementById("span_id");

document.write(eleObj.nodeName);

document.write("<br/>");

document.write(eleObj.nodeType);

document.write("<br/>");

document.write(eleObj.nodeValue);

document.write("<hr/>");

// 2、属性节点

var attrObj = eleObj.getAttributeNode("id");

document.write(attrObj.nodeName);

document.write("<br/>");

document.write(attrObj.nodeType);

document.write("<br/>");

document.write(attrObj.nodeValue);

document.write("<hr/>");

// 3、文本节点

var textObj = eleObj.firstChild;

document.write(textObj.nodeName);

document.write("<br/>");

document.write(textObj.nodeType);

document.write("<br/>");

document.write(textObj.nodeValue);

</script>

</body>

</html>

三、DOM父节点与子节点

Ⅰ、已知子节点获取父节点

Ⅱ、已知父节点获取子节点

Ⅲ、获取全部子节点

Ⅳ、获取子节点的长度

<!DOCTYPE html>

<head>

</head>

<body>

<span>Hello</span>

<ul>

</ul>

<span>World</span>

// 1、已知子节点获取父节点

var liEle = document.getElementById("li1");

var ulEle = liEle.parentNode;

// 2、已知子节点获取父节点

var ulObj = document.getElementsByTagName("ul")[0];

document.write(ulObj.firstChild);

document.write(ulObj.lastChild);

// 获取全部子节点

var childObj = ulObj.childNodes;

document.write(childObj);

// 获取长度，5个换行加4个子节点

document.write(childObj.length);

</script>

</body>

</html>

四、InnerHTML属性

Ⅰ、获取文本内容

Ⅱ、设置HTML标签

<!DOCTYPE html>

<head>

<title>innerHTML属性</title>

<style>

#box {

width:200px;

height:200px;

background-color: #3875d7;

}

</style>

</head>

<body>

// 获取span标签对象

var spanObj = document.getElementById("span_id");

// 获取span的文本内容

document.write(spanObj.innerHTML);

// 设置 HTML 标签

var divObj = document.getElementById("box");

divObj.innerHTML = '<table border="1" cellspacing="1" bgcolor="red" width="100px" height="100px"><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></table>\n'

</script>

</body>

</html>

五、DOM事件

内联模式

将事件作为标签使用，可以识别JS中的代码和函数，不能做到JS和HTML标签分离

脚本模式

将事件作为属性使用，匿名函数，HTML标签与JS分离

<!DOCTYPE html>

<head>

</head>

<body>

// 1、内联模式

// 将事件作为标签的属性使用

// 可识别JS中的代码和函数，不能做到JS和HTML标签分离

function func(){

document.write("hello");

}

// 2、脚本模式

// 将事件作为属性来使用，匿名函数

// 获取input标签

// HTML标签和JS分离

var input1 = document.getElementById("input_1");

// 给input标签添加单击事件

input1.onclick = function (){

document.write("input_1");

}

</script>

</body>

</html>

六、鼠标事件

①单击事件 onclick

②双击事件ondblclick

③悬浮事件 onmouseover

④失去焦点，移除鼠标 onmouseout

<!DOCTYPE html>

<head>

<style>

#box{

width:100px;

height:100px;

background-color: rebeccapurple;

}

</style>

</head>

<body>

// 获取元素

var divObj = document.getElementById("box");

// 添加事件

// 单击事件

divObj.onclick = function (){

alert("单机事件");

}

// 双击事件

divObj.ondblclick = function (){

alert("双击事件");

}

// 悬浮事件

divObj.onmouseover = function (){

alert("悬浮事件");

}

// 失去焦点，把鼠标移除

divObj.onmouseout = function (){

alert("失去焦点");

}

</script>

</body>

</html>

DOM属性的增删改、属性的其他操作及DOM事件相关推荐

JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,但是我们学习是为了能够更好地应用,今天我们就来看看DOM节点的增删改查. 不管在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
html增删改查按钮控件,HTML DOM节点的增删改查
上篇博客中,我们已经初步接触了DOM基础,可是我们学习是为了可以更好地应用,今天我们就来看看DOM节点的增删改查. 无论在哪里,我们想要操作一个东西,总是应该先去获得它.那么我们怎么获得呢? HTML ...
SpringBoot+Mysql+MDUI实现数据的增删改查和列表操作及单，多文件上传实例
SpringBoot+Mysql+MDUI实现数据的增删改查和列表操作及单,多文件上传实例开源地址:https://gitee.com/jfkjrym/demo.git evan原创内容!evan原 ...
JAXP对XML文档进行DOM解析实现增删改
上一节用JAXP对xml文档解析读取了其中的数据点击查看上一节内容,现在实行xml文档的增删改: xml文档: <?xml version="1.0" encoding=&q ...
dom对html增删改操作,6.DOM对HTML元素的增删改操作
节点的增删改操作 function createNode(){ //创建一个li元素 var li = document.createElement("li"); li.inner ...
JDBC（实现增删改查的通用操作）
JDBC JDBC概述创建表以及相对应的对象(ORM) 表对象获取连接的方式方式一方式二方式三方式四方式五(推荐使用) 增.删.改操作查询操作 JDBC概述为了使Java编写的程序 ...
记一些Python(Pymysql)建表、增删改查等基础操作(小白适用)
1.读取sql文件创建数据表有一个形如下图的sql文件,使用python读取文件并在数据库中创建所有的表. 很多人学习python,不知道从何学起. 很多人学习python,掌握了基本语法过后,不知 ...
eggjs增删改查MySQL,nodejs操作mysql实现增删改查
首先需要安装mysql模块:npm install mysql –save 然后创建user数据表: 接着使用nodejs对数据库进行增删改查: //引入mysql模块 var mysql = req ...

DOM属性的增删改、属性的其他操作及DOM事件

DOM属性的增删改、属性的其他操作及DOM事件相关推荐

最新文章

热门文章