JS 操作内容 操作元素

myhome 阅读:73 2022-09-29 10:02:31 评论:0

操作内容:
普通元素.innerHTML = "值"; 会把标记执行渲染
普通元素.innerText = "值"; 将值原封不动的展示出来,即使里面有标记

var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来。
var s = 普通元素.innerText; 值会把此元素下的文本取出来,标记不予理会。

表单元素 - 只能使用value 来取值赋值
表单元素.value = "值";
var s = 表单元素.value;

 操作相关元素

var a=document.getElementById('id');  找到a

var b=a.nextSibling;   a的下一个同辈   空格回车也算一个同辈

var c=a.previousSibling;  a的上一个同辈  回车 空格也算一个同辈

var b=a.parentNode;    a的父级元素

var b=a.childNodes;    a的子元素   是一个数组

var b=a.firstchild;    a的第一个子元素   lastchild 最后一个子元素   childNodes[ n]  找第n个子元素

alert(nodes[i] instanceof Text)判断是不是文本  是返回true  不是返回false   

  有[i]说明是在循环

元素的创建、添加删除

var a=document.getElementById('id');  找到a 

a.appendChild(子元素)         在a里面添加子元素  子元素同上  可以是div

a.removeChild(子元素);      删除子元素

a.selectIndex  查找的是第几个   

a.options[a.selectIndex]  按下标取出第几个option对象

创建标签

document.creatElement("div");   这里的div 只是其中的一个标签   可以写任何标签

创建 多个div

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <style type="text/css"> 
        #div1 { 
            width:200px; 
            height:200px; 
            background-color:aqua; 
        } 
        .ddd {width:50px; 
              height:50px; 
              background-color:red; 
        } 
    </style> 
</head> 
<body> 
    <div id="div1"></div> 
     
    <input type="button" id="btn" value="创建" /> 
</body> 
</html> 
<script type="text/javascript"> 
    var div = document.getElementById('div1'); 
    var btn = document.getElementById('btn'); 
    btn.onclick = function () { 
        div.innerHTML+="<div class='ddd'></div>" 
 
    } 
 
</script> 

  

评论添加删除

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <link href="StyleSheet.css" rel="stylesheet" /> 
</head> 
<body> 
   <!-- 大总框--> 
    <div class="all"> 
        <textarea id="text"></textarea> 
        <input type="button" value="发表" id="btn" /> 
        <input type="text" id="uuu" placeholder="请输入用户名" /> 
        </div> 
        <div class="iterm"> 
           
        </div> 
</body> 
</html> 
<script type="text/javascript"> 
    var btn = document.getElementById('btn'); 
    var int = document.getElementsByClassName('iterm'); 
    //内容取值 
    var t = document.getElementById('text'); 
    var text = t.value; 
    //用户名取值 
    var a = document.getElementById('uuu'); 
    var user = a.value; 
    // 添加内容 
    btn.onclick = function () { 
        int.innerHTML+="<div class='cell'>"+user+"</div><div class='cell'>"+text+"</div><div class='cell'><input type='button' value='删除' id='dele' /> 2017-03-02</div>" 
    } 
 
 
</script> 

css

* { 
    margin: 0px; 
    padding: 0px; 
} 
 
.all { 
    margin-left: 20%; 
    width: 60%; 
    height: 400px; 
    background-color: gray; 
} 
 
#text { 
    width: 100%; 
    height: 300px; 
    border: 1px solid black; 
} 
 
.iterm { 
    margin-left: 20%; 
    width: 60%; 
    background-color: blue; 
} 
.cell { 
    position:relative; 
    height:50px; 
    width:80%; 
    margin-left:10%; 
    border-bottom:1px dashed black; 
} 
#dele { 
    position:absolute; 
    bottom:5px; 
    right:10px; 
} 

  


本文参考链接:https://www.cnblogs.com/zhangwei99com/p/6666498.html
标签:JavaScript
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号