8步快速搭建个人网站视频,保定建设环境项目网站,相册网站建设目的,wordpress+sql+导入数据库备份1、通过id获取标签元素
DOM是文档对象模型#xff0c;它提供了一些属性和方法来方便我们操作document对象#xff0c;比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素
// 用法
window.document.getElementById(id);
// 例子
!DOCTYPE html
它提供了一些属性和方法来方便我们操作document对象比如getElementById()方法可以通过某个标签元素的id来获取这个标签元素
// 用法
window.document.getElementById(id);
// 例子
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
bodyh2 iddemo知数SEO_专注搜索引擎优化和品牌推广/h2
scriptvar h2 document.getElementById(demo);console.log(typeof(h2));console.log(h2);
/script
/script
/body
/html2、操作标签元素的内容
使用DOM可以操作HTML标签元素写出各种绚丽多彩的特效最基本的就是操作标签元素的内容。步骤就是先找到要操作的标签元素接下来对这个标签元素进行操作
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
bodyh2 iddemo知数SEO_专注搜索引擎优化和品牌推广/h2button onclickupdate()点击修改h2标签元素的显示内容/button
scriptfunction update(){var h2 document.getElementById(demo);h2.innerHTML 这是修改后的内容;}
/script
/body
/html3、操作标签元素的属性
3.1 获取标签元素的属性
DOM不仅可以操作标签元素的内容还可以操作标签元素的属性。对象都是有属性和方法的我们获取标签元素的属性的值可以使用element对象的getAttribute()方法这个方法接受一个属性名返回对象的属性值
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
bodya iddemo hrefhttps://www.zhishunet.com知数SEO_专注搜索引擎优化和品牌推广/abutton onclickgetAttr()点击获取a标签的href属性/button
scriptfunction getAttr(){var obj_a document.getElementById(demo);alert(obj_a.getAttribute(href));}
/script
/body
/html3.2、修改标签元素的属性
我们可以获取标签元素的属性的值也可以修改元素属性的值DOM提供了setAttribute()方法修改标签元素属性的值
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
bodya iddemo hrefhttps://www.zhishunet.com知数SEO_专注搜索引擎优化和品牌推广/abutton onclickgetAttr()点击获取a标签的href属性/button
scriptfunction getAttr(){var obj_a document.getElementById(demo);obj_a.setAttribute(href,http://www.zhishunet.cn);}
/script
/body
/html其实不仅可以对存在的标签属性的值进行修改对于不存在的属性我们可以添加并设置它的值
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
bodya iddemo知数SEO_专注搜索引擎优化和品牌推广/abutton onclickgetAttr()点击获取a标签的href属性/button
scriptfunction getAttr(){var obj_a document.getElementById(demo);obj_a.setAttribute(href,http://www.zhishunet.cn);}
/script
/body
/html4、操作标签元素的css样式
操作标签元素的css样式我们需要使用标签元素的style属性
!DOCTYPE html
html
headmeta charsetUTF-8title知数SEO_专注搜索引擎优化和品牌推广/title
/head
bodydiv iddemo stylewidth:200px; height:400px;background-color:red;/divbrbutton onclickupdate()点击修改样式/button
scriptfunction update(){var obj_a document.getElementById(demo);obj_a.style.backgroundColor black;}
/script
/body
/html
