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

    状压dp 图上怎么跑dp?我们跑三进制状压dp,0表示选了,1表示既没选也没覆盖,2表示没选但是被覆盖了. 状态是dp[dep][S]表示当前走到了深度为dep的节点,状态为S,按照dfs序转移 每次 ...

  2. Python interview_python

    https://github.com/taizilongxu/interview_python 1 Python的函数参数传递 strings, tuples, 和numbers是不可更改的对象,而l ...

  3. 3.15-3.21 hive项目实战

    一.创建表并导入日志数据,引出问题 ##建表 hive (default)> create table IF NOT EXISTS default.bf_log_src( > remote ...

  4. 通过HTTP请求WEBAPI的方式

    平时工作中长期需要用到通过HTTP调用API进行数据获取以及文件上传下载(C#,JAVA...都会用到).这里获取的是包括网页的所有信息.如果单纯需要某些数据内容.可以自己构造函数甄别抠除出来!一般的 ...

  5. uoj#275. 【清华集训2016】组合数问题（数位dp）

    传送门 假设有\(k|{n\choose m}\),因为\(n!\)中质因子\(k\)的次数为\(S(n)=\left\lfloor\frac{n}{k}\right\rfloor+\left\lfl ...

  6. perl 处理特殊字符

    如果大家想使用perl 来处理一些特殊字符,例如"del"这种字符,就需要使用到chr() 函数了 例如大家如果向一个文本中写入以下内容 aaaa0x1270x1bccccc 这时 ...

  7. 在linux下pycharm无法输入中文

    1.在centos系统下,在pycharm中,输入中文件时,显示的字母,无法显示中文字符. 首先,在centos下安装中文输入法,下面安装的是五笔输入法. a::yum安装ibus的五笔输入法: yu ...

  8. Spring事件机制详解

    一.前言 说来惭愧,对应Spring事件机制之前只知道实现 ApplicationListener 接口,就可以基于Spring自带的事件做一些事情(如ContextRefreshedEvent),但 ...

  9. UINavigationController 的一些坑

    坑一:自定义导航栏返回键 iOS7及之后版本 手势边缘右滑返回失效 解决方案: -(void)viewDidLoad{ [super viewDidLoad]; //self 为 UINavigati ...

  10. log4j和log4j2怎么动态加载配置文件

    应用场景与问题 当项目在运行时,我们如果需要修改log4j 1.X或者log4j2的配置文件,一般来说我们是不能直接将项目停止运行再来修改文件重新部署的.于是就有这样一个问题:如何在不停止当前项目的运 ...