DOM对象控制HTML

最新推荐文章于 2023-12-23 00:22:28 发布

格林黄

最新推荐文章于 2023-12-23 00:22:28 发布

阅读量180

点赞数 1

分类专栏： web前段javascript知识点汇总

本文链接：https://blog.csdn.net/apity123/article/details/68066016

版权

web前段javascript知识点汇总专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.节点相关的操作

getElementById()

getElementByName()

getElementsByClassName()

getElementsByTagName()

getAttribute()：获取元素属性

setAttribute()：设置元素属性

childNodes()：访问子节点

parentNode()：访问父节点

createElement()：访问元素

createTextNode():创建元素节点

appendChild():在末尾添加节点

insertBefore():插入节点

removeChild():删除节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
	<a id="link" href="http://www.baidu.com">百度</a>
    <script>
		var linkList=document.getElementById("link");
		var linkA=linkList.getAttribute("href");
		document.write(linkA);		//以文档的形式输出网页中
		linkList.setAttribute("href","http://www.3g.qq.com");//修改属性为href的值
		linkList.style.color="red";//将a标签中的字体设为红色
    </script>
</body>
</html>

删除节点

document.getElementsByTagName("body")[0].removeChild(link);//已知父节点

link.parentNode.removeChild(link); //未知父节点

格林黄

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM对象控制HTML

1.节点相关的操作getElementById()getElementByName()getElementsByClassName()getElementsByTagName()getAttribute()：获取元素属性setAttribute()：设置元素属性childNodes()：访问子节点parentNode()：访问父节点createElement()
复制链接

扫一扫