innerHTML
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!--innerHTML：设置或获取元素里的文本内容(包含html标记，解析css样式)--> <p id="txt"></p> <p id="box"></p> <!-- <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> <p id="box"></p> <!-- <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>
以上就上有关js--Dom(三)内容节点操作+属性节点操作的相关介绍，要了解更多php教程_php自学_php视频教程下载 - 绵阳技术博客内容请登录学步园。