dom api之Element

乐之者java

于 2020-05-24 09:45:07 发布

阅读量115

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106307298

版权

前端专栏收录该内容

175 篇文章 3 订阅

订阅专栏

前边说了html文档在被浏览器载入后整体可以看做一个document对象，里面的标签、文本又可以看做元素节点、文本节点、属性节点等。当节点为元素节点时，该节点拥有一些属性和方法。这些属性和方法我们可能经常使用到或者最起码经常见到过，却发现原来它属于这里。

属性	属性描述
element.className	设置css类名
element.scrollTop	滚出上边缘的距离
element.offsetHeight	返回元素的高度
element.offsetLeft	相当于jquery的offset()
element.offsetTop	相当于jquery的offset()
element.innerHTML	设置或返回元素的内容
element.clientHeight	返回元素的可见高度。

element方法	方法描述
getAttribute(name)	得到指定属性的值，也可以直接.属性
setAttribute(name,value)	设置指定属性的值，也可以直接.属性
removeAttribute(name)	移除属性
hasAttribute(name)	判断是否有属性
parent.insertBefore(newNode,refNode)	在调用者的指定节点前面插入节点,refNode为null时相当于appendChild(newNode)
parent.appendChild(newNode)	内部附加
parent.removeChild(oldNode)	移除指定节点
replaceChild(newNode,oldNode)	节点替换

我先整一个简单的html文档结构如下，等下我就来操作这个html文档：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cookie</title>
</head>
<body>
<div id="div1" class="div1">
			<span id="span1">div1里面span的内容</span>
	</div>
	<ul id="fruit" >
		<li>苹果</li>
		<li>香蕉</li>
		<li>梨子</li>
	</ul>
</body>
</html>

效果如图：

编写下面的javascript代码并放入html中（注意位置，放在最后哦，不然html文档还没加载完，javascript获取不到就会报错了）：

<script>
	var first=document.getElementById("div1");
	var attr=first.getAttribute("id");
	console.log(attr);//结果：div1
	first.setAttribute("name","div_first");//原先没有该属性设置就相当于新增该属性了
	//不是元素类型的node不能使用这些方法
	//var txtNode=document.getElementById("span1").firstChild;
	  //txtNode.setAttribute("name","txtNode");
	
		/*
			document这个父对象提供createElement("p") createTextNode("文本内容")  createAttribute("id")  
		*/
		var newItem=document.createElement("li");
		var textnode=document.createTextNode("草莓");
		newItem.appendChild(textnode);
		var ul=document.getElementById("fruit");
		ul.insertBefore(newItem,ul.childNodes[0]);
		/*
		通过js修改css，名称一般和css属性一样，css属性为连缀的js里面改为驼峰法
		*/
		ul.style.color="#f00";
		ul.style.marginTop="150px";
</script>

这时候再刷新网页，就变成了下面的样子了：