操作内容：
普通元素.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. ubuntu 禁止错误信息 report 问题弹出

    发现ubuntu只要出现点问题就会提示要不要report error, 光点cancel就点烦了. 而且今天重新安装了一台ubuntu结果开机就蹦出error, 好烦啊. 下面说个特别有效的解决办法, ...

  2. git add . 的时候遇到warning: LF will be replaced by CRLF inXXX 解决办法

    $ git add . warning: LF will be replaced by CRLF in shop/Runtime/Cache/86bbc820c9ec1 d314a9c71cf5651 ...

  3. 使用 SourceTree 管理ios项目

    SourceTree 是一个非常优秀的版本控制软件,他是一个客户端,方便我们去接入 GitHub .BitBucke 上面托管的代码. 声明(1——4是来自简书的非个人作品,仅仅保存资料学习使用) 一 ...

  4. CF-796C

    C. Bank Hacking time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  5. Atom 基本使用

    插件 simplified-Chinese-menu:汉化 Markdown-preview-plus:Markdown 实时预览 Atom 自带 Markdown-preview,这个插件是其增强版 ...

  6. Linux which 查找命令

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: which 基础的命令 命令名称:which 命令的所在路径:/usr/bin ...

  7. Linux useradd 添加用户

    在 linux 中,如果我们想添加一个用户,那么使用的命令如下: 用户管理命令: useradd 基础的命令 命令名称:useradd 命令的所在路径:/usr/bin/useradd 执行权限:ro ...

  8. http协议之基础概念篇（1）

    内容概述: 该篇主要内容概述 a.http相关术语解析 b.http的基本原理与工作流程 c.相关工具的使用(Wireshark) 作用介绍 绝大多数的web开发,都是构建在http协议之上的. HT ...

  9. ES6笔记总结

    常用命令 函数的rest参数和扩展 promise使用 module.exports和Es6 import/export的使用 function sum(x,y,z){ let total = 0; ...

  10. 洛谷 - P3377 - 【模板】左偏树（可并堆） - 左偏树 - 并查集

    https://www.luogu.org/problemnew/show/P3377 左偏树+并查集 左偏树维护两个可合并的堆,并查集维护两个堆元素合并后可以找到正确的树根. 关键点在于删除一个堆的 ...