操作内容：
普通元素.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. Oracle中CASE WHEN的用法实例

    实例演示: (1)查询表users中的数据. select u.id,u.realname,U.SEX from users u; 查询结果如下 ID    REALNAME SEX 1  10082 ...

  2. XP系统显示控件异常解决方法

    XP下显示WPF控件异常,一般通过关闭Direct 3D加速即可.1.按“WIN”+R键,在“运行”输入框中输入“dxdiag”:2.在DirectX诊断工具”对话框,选择“显示”页面,在“Direc ...

  3. E20190402-hm

    porxy n. 代理服务器; 代表权; 代理人,代替物; 委托书; enroll  v. 招收; 注册; 登记; 加入; enrollment n. 注册; 登记; 入会;

  4. CodeForces599D【数学】

    题意: 给出一个x,求有多少个矩阵中满足存在x个不同的正方形. 思路: (数学渣+推理渣) #include<bits/stdc++.h> using namespace std; typ ...

  5. shader实例（二十二）TexGen-球面贴图SphereMap

    http://blog.sina.com.cn/s/blog_89d90b7c0102vfqz.html 球面贴图一般用于环境反射,如下图(左边为球面贴图,右边为正常贴图),一个镜面水晶球在这只猫的前 ...

  6. 浅谈C++中内存泄漏的检测

    首先我们需要知道程序有没有内存泄露,然后定位到底是哪行代码出现内存泄露了,这样才能将其修复.最简单的方法当然是借助于专业的检测工具,比较有名如BoundsCheck,功能非常强大,相信做C++开发的人 ...

  7. Python的一些技巧

    a = [32, 37, 28, 30, 37, 25, 27, 24, 35, 55, 23, 31, 55, 21, 40, 18, 50, 35, 41, 49, 37, 19, 40, 41, ...

  8. Codevs 1523 地精部落

    1523 地精部落 省队选拔赛  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解       题目描述 Description 传说很久以前,大地上居住 ...

  9. [Xcode 实际操作]一、博主领进门-(14)在顶部状态栏显示风火轮以及为应用程序添加应用图标

    目录:[Swift]Xcode实际操作 本文将演示在顶部状态栏显示风火轮. 主要用于在执行某个长时间动作时,提示用户耐心等待动作的执行. 在项目导航区,打开视图控制器的代码文件[ViewControl ...

  10. 原生js回到顶部

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...