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

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  3.     <title></title>
  4.     <style type="text/css">
  5.         #div1 {
  6.             width:200px;
  7.             height:200px;
  8.             background-color:aqua;
  9.         }
  10.         .ddd {width:50px;
  11.               height:50px;
  12.               background-color:red;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="div1"></div>
  18.  
  19.     <input type="button" id="btn" value="创建" />
  20. </body>
  21. </html>
  22. <script type="text/javascript">
  23.     var div = document.getElementById('div1');
  24.     var btn = document.getElementById('btn');
  25.     btn.onclick = function () {
  26.         div.innerHTML+="<div class='ddd'></div>"
  27.  
  28.     }
  29.  
  30. </script>

　　

评论添加删除

  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  3.     <title></title>
  4.     <link href="StyleSheet.css" rel="stylesheet" />
  5. </head>
  6. <body>
  7.    <!-- 大总框-->
  8.     <div class="all">
  9.         <textarea id="text"></textarea>
  10.         <input type="button" value="发表" id="btn" />
  11.         <input type="text" id="uuu" placeholder="请输入用户名" />
  12.         </div>
  13.         <div class="iterm">
  14.  
  15.         </div>
  16. </body>
  17. </html>
  18. <script type="text/javascript">
  19.     var btn = document.getElementById('btn');
  20.     var int = document.getElementsByClassName('iterm');
  21.     //内容取值
  22.     var t = document.getElementById('text');
  23.     var text = t.value;
  24.     //用户名取值
  25.     var a = document.getElementById('uuu');
  26.     var user = a.value;
  27.     // 添加内容
  28.     btn.onclick = function () {
  29.         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>"
  30.     }
  31.  
  32. </script>

css

  1. * {
  2.     margin: 0px;
  3.     padding: 0px;
  4. }
  5.  
  6. .all {
  7.     margin-left: 20%;
  8.     width: 60%;
  9.     height: 400px;
  10.     background-color: gray;
  11. }
  12.  
  13. #text {
  14.     width: 100%;
  15.     height: 300px;
  16.     border: 1px solid black;
  17. }
  18.  
  19. .iterm {
  20.     margin-left: 20%;
  21.     width: 60%;
  22.     background-color: blue;
  23. }
  24. .cell {
  25.     position:relative;
  26.     height:50px;
  27.     width:80%;
  28.     margin-left:10%;
  29.     border-bottom:1px dashed black;
  30. }
  31. #dele {
  32.     position:absolute;
  33.     bottom:5px;
  34.     right:10px;
  35. }

　　

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. Outlook 开发

    转自:http://www.cnblogs.com/madebychina/archive/2011/09/20/madebychina_2.html C#使用如下代码调用Outlook2003发送邮 ...

  2. 爬虫库之BeautifulSoup学习（四）

    探索文档树: find_all(name,attrs,recursive,text,**kwargs) 方法搜索当前tag的所有tag子节点,并判断是否符合过滤器的条件 1.name参数,可以查找所有 ...

  3. 2.3 Hive的数据类型讲解及实际项目中如何使用python脚本对数据进行ETL

    一.hive Data Types https://cwiki. apache. org/confluence/display/HiveLanguageManual+Types Numeric Typ ...

  4. python序列化之pickle,json,shelve

    模块 支持方法 说明 json dumps/dump loads/load 只能处理基本数据类型: 用于多种语言间的数据传输: pickle dumps/dump loads/load 支持pytho ...

  5. 国内互联网公司的开源项目及github地址汇总

    国内互联网公司的开源项目及github地址汇总 阿里 阿里的开源项目很多,这也跟@淘宝正明的开源态度密不可分.有很多重量级的项目,例如LVS.Tengine,或者很有实践价值的中间件,例如 MetaQ ...

  6. UVa 10755 Garbage Heap (暴力+前缀和)

    题意:有个长方体由A*B*C组成,每个废料都有一个价值,要选一个子长方体,使得价值最大. 析:我们暴力枚举上下左右边界,然后用前缀和来快速得到另一个,然后就能得到长方体,每次维护一个最小值,然后差就是 ...

  7. SqlServer2012——表

    1.数据类型 数字类型:int,smallint, 高精度:decimal,numeric 日期和时间:datetime,smalldatetime 二进制:binary,varbinary,imag ...

  8. PhpStorm之配置数据库连接

    打开编辑器,找到编辑器右侧的 Database 点击 Database,点击左上角的 + ,选择Data Source ,再点击需要连接的数据库类型(因为我的数据库是MySQL,所以使用MySQL数据 ...

  9. lightoj 1035【暴力】

    思路: 预处理一下素数数组,然后暴力计算就好了. 类似处理素数因子: #include <cstdio> #include <iostream> #include <st ...

  10. Pycharm 配置autopep8到菜单

    Pycharm 可以自动检测PEP8规范. 我们可以安装autopep8来自动修改文件实现PEP8规范. 1.通过Pycharm安装autopep8 2.File->Setting->Ex ...