查找html元素的方法、修改html输入流、属性和样式

最新推荐文章于 2024-05-29 10:46:18 发布

a_z_and_A_Z

最新推荐文章于 2024-05-29 10:46:18 发布

阅读量784

点赞数

分类专栏： JavaScript 文章标签： dom 文档对象

本文链接：https://blog.csdn.net/qwer_df_b/article/details/77170395

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 DOM（Document Object Model） 

 
 文档对象模型 

 
 HTML DOM 结构 

 
 方法是您能够执行的动作（比如添加或修改元素）。 

 
 属性是您能够获取或设置的值（比如节点的名称或内容）。 

 
 查找 HTML 元素 

 
 通过ID查找元素 

function change() {
document.getElementById("jredu").style.color="red";
}

 
 通过类名称查找元素 

function change1() {
	var result=document.getElementsByClassName("qut");/*数组类型的数据*/
	for(vari=0;i<result.length;i++){
	result[i].style.fontSize="30px";
	}
}

 
 通过名字查找元素 

function change2() {
	var result=document.getElementsByName("qut");/*数组类型数据*/
	for(vari=0;i<result.length;i++){
	result[i].style.fontSize="30px";
	}
}

 
 通过标签查找元素 

function change3() {
var result=document.getElementsByTagName("p");/*数组类型数据*/
	for(vari=0;i<result.length;i++){
	result[i].style.fontSize="30px";
	result[i].style.color="red";
	}
}

 
 appendChild() 把新的子节点添加到指定节点。 

 
 语法 

 
 node.appendChild(node) 

function copyImg() {
	/*找到图片*/
	var old1=document.getElementById("img");
	/*复制图片*/
	var image1=old1.cloneNode();
	document.body.appendChild(image1);
	}

 
 removeChild() 删除子节点。 

 
 语法 

 
 node.removeChild(node) 

function remove() {
	var img=document.getElementById("img");
	document.body.removeChild(img);
	}

 
 replaceChild() 替换子节点。 

 
 语法 

 
 node.replaceChild(newnode,oldnode) 

function replace() {
	var img=document.getElementById("img");
	var newImg=document.createElement("img");
	newImg.src="../../../img/f3_Android2.png";
	document.body.replaceChild(newImg,img);
	}

 
 insertBefore() 在指定的子节点前面插入新的子节点。 

 
 语法 

 
 node.insertBefore(newnode,existingnode) 

function newImg() {
	/*创建一个新图片*/
	var image=document.createElement("img");
	/*添加属性 用.符号法*/
	image.src="../../../img/f3_Android5.png";
	var old=document.getElementById("img");
	var div=document.getElementById("div");
	div.insertBefore(image,old);
	}

 
 createElement() 创建元素节点。 

 
 语法： 

 
 createElement(name) 

 
 cloneNode() 克隆节点 

 
 定义和用法 

 
 cloneNode() 方法创建节点的拷贝，并返回该副本。 

 
 cloneNode() 方法克隆所有属性以及它们的值。 

 
 如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。 

 
 语法 

 
 node.cloneNode(deep) 

function clone() {
	var li3=document.getElementById("li3");
	/*参数为false：只复制标签，标签内的内容和子元素不复制
	*参数为true：不仅复制标签，标签内的内容和子元素都复制*/
	var lia3=li3.cloneNode(true);
	var ul=document.getElementById("ul");
	ul.insertBefore(lia3,li3);
	}

 
 改变 HTML 输出流 

 
 document.write( ) 

 
 JavaScript 能够创建动态的 HTML 内容： 

 
 今天的日期是： Sat Aug 05 2017 16:27:28 GMT+0800 (中国标准时间) 

 
 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。 

 
 实例 

<!DOCTYPE html>
<html>
<body>
	<script>document.write(Date());</script>
</body>
</html>

 
 提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。 

 
 改变 HTML 内容 

 
 .innerHTML 

 
 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。 

 
 如需改变 HTML 元素的内容，请使用这个语法： 

 
 document.getElementById(id).innerHTML=new HTML 

 
 实例 

 
 本例改变了 <p> 元素的内容： 

<html>
<body>
	<p id="p1">Hello World!</p>
</body>
</html>

<script>document.getElementById("p1").innerHTML="New text!";</script>

 
 改变 HTML 属性 

 
 .attribute 

 
 如需改变 HTML 元素的属性，请使用这个语法： 

 
 document.getElementById(id).attribute=new value 

 
 实例 

 
 本例改变了 <img> 元素的 src 属性： 

<!DOCTYPE html>
<html>
<body>
	<img id="image" src="smiley.gif">
</body>
</html>

<script> document.getElementById("image").src="landscape.jpg";</script>

 
 改变 HTML 样式 

 
 .style.property 

 
 如需改变 HTML 元素的样式，请使用这个语法： 

 
 document.getElementById(id).style.property=new style 

 
 下面的例子会改变 <p> 元素的样式： 

<p id="p2">Hello World!</p>

<script>document.getElementById("p2").style.color="blue";</script>

a_z_and_A_Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录