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

}

　　

JS 操作内容 操作元素的更多相关文章

  1. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  2. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. JS之document对象（找元素、操作内容、操作属性、操作样式及4道例题）

    document对象 一.找元素 1.根据id找 示例: <input id = "a" type="button" value="找元素&qu ...

  4. JS——操作内容、操作相关元素

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

  5. 【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素

    一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...

  6. JS/jQuery--iframe框架内外元素的操作（转）

    JS/jQuery--iframe框架内外元素的操作 原创 2017年12月07日 14:23:09 标签: js / iframe 28 两个问题: 如何在父页面操作iframe框架内的元素? 如何 ...

  7. js进阶 11-1 jquery中的页面内容操作的三个方法

    jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...

  8. JS DOM操作（四） Window.docunment对象——操作内容

    操作内容:即对标签所夹内容的操作 一 非表单元素内容操作 定位 var a = document.ElementById( "id" ) 1.获取内容 var s = a.inne ...

  9. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

随机推荐

  1. java：calendar类及一些比较实用的utils（二）

    在这里将我在项目中用到的一些关于使用Calendar的utils分享出来,只是一部分,后期遇到好的通用方法会继续添加,以和大家交流学习,如果你还不熟悉这个类的使用,但是急需某个util,可以加群:41 ...

  2. HDOJ-2047

    阿牛的EOF牛肉串 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  3. HDOJ-2037

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  4. Identity Server 4 原理和实战（完结）_汇总贴

    视频地址:https://www.bilibili.com/video/av42364337 语雀地址:https://www.yuque.com/yuejiangliu/dotnet/solenov ...

  5. FTP服务基础

    网络文件共享 本章内容 FTP服务 NFS服务 SAMBA服务 DAS.NAS.SAN(文件) DAS:开放系统的直连式存储(Direct-Attached Storage) 磁盘连接到本机的电脑上, ...

  6. 洛谷 - P1582 - 倒水 - 位运算

    https://www.luogu.org/problemnew/show/P1582 要求用最少的瓶子,那肯定不能有两个一样的瓶子,否则合并更优. 枚举其二进制位,每次加上lowbit,将最后一个1 ...

  7. 2016四川省赛A,C【写了1w个if的水题】

    A题: #include <iostream> #include <stdio.h> #include <string.h> #include <algori ...

  8. Window 10 Alt Tap 切换窗口，设置成Windows 7风格

    升级了Windows 10 以后,切换窗口非常的难受.新版的窗口切换的图标变成了窗口预览了,这总让我一瞬间找不到要去的窗口,所以我打算切换成Windows 7 的小图标风格. Windows + R ...

  9. linux ping

    ping [ -d] [ -D ] [  -n ] [  -q ] [ -r] [ -v] [  -R ] [ -a addr_family ] [  -c Count ] [ -w timeout ...

  10. noip2017普及组

    过了这么久才来写博客,也是我这么一段时间都很低迷吧.... 老实来说,今年应该是要打提高组的...可还是打了普及组... 其实最猥琐的还是我连普及都写挂了,作为一个学了两年的人,图论,进阶dp都写过的 ...