操作内容：
普通元素.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. windows install JDK&&JRE

    重装系统后,安装的java环境没了,只能重装一下~~~~ 1.下载JDK 2.这里会安装两次,其中第一次为安装 JDK,第二次安装JRE,建议不要将这两个放在同一个文件夹. 3.配置环境变量 用鼠标右 ...

  2. 怎么在Ubuntu下设置程序的快捷键

    参考 http://jingyan.baidu.com/article/1e5468f97f9e75484861b773.html 我的系统是 64bit Ubuntu14.04 我设置了 gedit ...

  3. TypeScript完全解读(26课时)_4.TypeScript完全解读-接口

    4.TypeScript完全解读-接口 初始化tslint tslint --init:初始化完成后会生成tslint.json的文件 如果我们涉及到一些规则都会在这个rules里面进行配置 安装ts ...

  4. Laravel中的路由管理

    //路由中输出视图Route::get('/', function () { return view('welcome');}); //get路由请求Route::get('get',function ...

  5. QDUOJ LC的课后辅导 单调递增栈

    LC的课后辅导 发布时间: 2015年9月19日 21:42   时间限制: 1000ms   内存限制: 256M 描述 有一天,LC给我们出了一道题,如图: 这个图形从左到右由若干个 宽为1 高不 ...

  6. laravel 视图调用方法并传递参数

    视图层 route 中文 路由 <a href="{{route('cc',array('id'=>11111))}}">446454</a> 路由层 ...

  7. 面向对象-mixin设计模式的应用（多继承应用场景）

    什么是设计模式? 设计模式只是一种开发思想.不是什么固定的格式. 前人的好的思想,我们后人拿过来用! mixin设计模式: 1.mixin设计迷失可以在不对类的内容的修改前提下,扩展类的功能(添加父类 ...

  8. c语言里面你不知道的break与switch，contiune的用法

    前言:最近上完课在宿舍闲来无事,就拿起了C Primer Plus 这本书看,是自己入门编程的第一门语言:看了一些基本语法知识点,最让我需要总一下的是就是标题所说的这个语法知识点,记得大一的时候去考计 ...

  9. Mysql用户root密码找回

    1.本试例的环境如下: 2.mysql数据库的版本如下,此数据库运行多实例: mysql Ver 15.1 Distrib 10.2.24-MariaDB, for Linux (x86_64) us ...

  10. iOS集成支付宝支付

    本文由本人原创发表于博客园,转载请注明出处 http://www.cnblogs.com/wangqw/p/5074907.html 一. 开发前准备 iOS 支付宝SDK下载地址:(内含iOS An ...