innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--innerHTML：设置或获取元素里的文本内容(包含html标记，解析css样式)-->
<p id="txt"></p>
<div id="box"></div>
<!-- <input type="button" value="给p标签添加文本内容"/>-->
<!-- 下面的button标签等价于上面的普通按钮 -->
<button id="txt-btn">给p标签添加文本内容</button>
<script>
var btn1=document.getElementById('txt-btn');
btn1.onclick=function(){
var p= document.getElementById('txt');
//设置p元素里的文本内容
p.innerHTML="<h2 style='color:red'>我是p里面的h2</h2>";
//获取p元素里的文本内容
var content=p.innerHTML;
console.log(content);
}
</script>
</body>
</html>
innerText
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--innerText：设置或获取元素里的文本内容(不包含html标记，不解析css样式)-->
<p id="txt"></p>
<div id="box"></div>
<!-- <input type="button" value="给p标签添加文本内容"/>-->
<!-- 下面的button标签等价于上面的普通按钮 -->
<button id="txt-btn">给p标签添加文本内容</button>
<script>
var btn1=document.getElementById('txt-btn');
btn1.onclick=function(){
var p= document.getElementById('txt');
//设置p元素里的文本内容
p.innerText="<h2 style='color:red'>我是p里面的h2</h2>";
//获取p元素里的文本内容
var content=p.innerText;
console.log(content);
}
</script>
</body>
</html>
把元素当成对象来操作属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 操作属性节点的方式1：把元素当成对象来操作它的属性,
两种写法，分别是元素.属性名或元素["属性名"]
特殊： 如果要操作的属性名是class,那么要把class改成className-->
<img id="pic" src="../img/adv_1.jpg" alt="无法显示图片">
<p class="pt" id="pp">我是一个段落</p>
<input type="button" id="btn1" value="改变图片" />
<input type="button" id="btn2" value="获取p元素的class属性" />
<script>
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
//设置img元素的src属性
document.getElementById('pic'). src="../img/tly.jpg";
//获取img元素的src属性
var src= document.getElementById('pic'). src;
console.log(src);
}
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
//获取元素的class属性
var pclass=document.getElementById('pp').className;
console.log(pclass);
}
</script>
</body>
</html>
通过元素的属性相关方法来操作属性节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 操作属性节点的方式2：通过元素的属性相关的方法来操作属性节点
方法1：getAttribute(属性名):获取一个属性的值，参数是属性名
方法2：setAttribute(属性名，属性的值)：设置一个属性的值
方法3：removeAttribute(属性名)：移除某个属性
-->
<img id="pic" src="../img/adv_1.jpg" alt="无法显示图片">
<p class="pt" id="pp">我是一个段落</p>
<input type="button" id="btn1" value="获取图片的src属性" />
<input type="button" id="btn2" value="设置图片的src属性" />
<input type="button" id="btn3" value="移除图片的src属性" />
<script>
var btn1=document.getElementById('btn1');
btn1.onclick=function(){
//获取img元素的src属性
var src= document.getElementById('pic'). getAttribute("src");
console.log(src);
}
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
//设置img元素的src属性
var img=document.getElementById('pic');
img.setAttribute("src","../img/tly.jpg");
}
var btn2=document.getElementById('btn3');
btn3.onclick=function(){
//移除img元素的src属性
var img=document.getElementById('pic')
img.removeAttribute("src");
}
</script>
</body>
</html>
