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

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值