JS 操作内容操作元素

操作内容：
普通元素.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;
}

posted @ 2017-04-04 21:15 天晴微笑阅读(523) 评论(0) 收藏举报

刷新页面返回顶部

JS 操作内容 操作元素

公告

JS 操作内容操作元素