createElement是HTML中运用W3C DOM对像模型建构子节点也便是子元素的概念

浅谈javascript中createElement事件,javascriptelement

createElement是HTML中使用W3C DOM对像模型建构子节点也正是子成分的定义

复制代码 代码如下:

 <script>
   window.onload = function () {
   var input  = document.createElement(‘input’);
   var button = document.createElement(‘input’);
   input.type =’text’; 
   input.id= ‘text’;
   input.value =’1′;
   button.type=’button’;
   button.value =’逐加’;
   button.style.width = ’40px’;
   button.style.height = ’23px’;
   document.body.appendChild(input);
   document.body.appendChild(button);
   button.onclick = function(){
      var value = input.value;
      input.value = value * 1 + 1;
   }
  }
 </script>

 注:value其实是四个字符,假如将input.value=value*1+1;换到input.value=value+1;则结果会并发111111,他是延绵不断以字符格局加1的,所以那时候value*1的就能够将value值调换到Int型了。

总结:

要最后消除 createElement 方法的包容性难点,照旧要小心看清浏览器,针对 IE
能够利用其特有的通过为createElement 传入一段合法的 HTML
代码字符串作为参数的法子,非 IE 浏览器照旧选择 W3C 标准的正经措施。

createElement是HTML中使用W3C DOM对像模型建构子节点也便是子成分的概念
复制代码 代码如下: scr…

Js基础

复制代码 代码如下:

1:document.write()

 <script>
   window.onload = function () {
   var input  = document.createElement(‘input’);
   var button = document.createElement(‘input’);
   input.type =’text’; 
   input.id= ‘text’;
   input.value =’1′;
   button.type=’button’;
   button.value =’逐加’;
   button.style.width = ’40px’;
   button.style.height = ’23px’;
   document.body.appendChild(input);
   document.body.appendChild(button);
   button.onclick = function(){
      var value = input.value;
      input.value = value * 1 + 1;
   }
  }
 </script>

那些是动态创造元素内容,利用js。那些能够应用js来创立成分,文本,标签等,document.write()与document.writeln()的界别就在于writeln()输出内容后,会在源代码中换一行,而write()会紧挨着输出不会有别的换行。这几个标签必需随页面一齐加载呈现。

 注:value其实是一个字符,要是将input.value=value*1+1;换来input.value=value+1;则结果汇合世111111,他是无休止以字符格局加1的,所以那时候value*1的就能够将value值调换到Int型了。

在一个网页中引用其余网页能够选择js的document.write(html代码),那样子生成。

总结:

2:最基本的dom遍历属性

要最后消除 createElement 方法的兼容性难点,照旧要专心看清浏览器,针对 IE
能够运用其特有的通过为createElement 传入一段合法的 HTML
代码字符串作为参数的方法,非 IE 浏览器依然采取 W3C 规范的正规措施。

àdocument.getElementById()

您可能感兴趣的稿子:

  • javascript
    createElement()创立input不能够安装name属性的缓和办法
  • Javascript
    createElement和innerHTML扩充页面成分的习性比较
  • 动态增多option及createElement使用示例
  • 动态的创建二个因素createElement及删除七个要素
  • js
    用CreateElement动态成立标签示例
  • 应用jQuery化解IE与FireFox下createElement方法的反差
  • document.createElement()用法
  • createElement和onclick
  • 动态加载js文件
    document.createElement
  • javascript中createElement的三种创立格局

依据成分id获取成分,使用这一个,不是聚众,是单个的要素。

àdocument.getElementsByName()

可是这一个奇怪,依据成分的name获取成分,这几个放回的是指标数组,和底下获取到的是会晤只有上面包车型客车获得到的是单个的成分。在表单成分的时候使用最棒。

à
document.getElementsByTagName()

那几个也是获得成分,依据页面上标签的名字获取具备的要素,获取到的是个集聚。

Eg:开关完结里面内容更改

  1. <script type=”text/javascript”>

  2.     window.onload = function() {

  3.         var inputs =
    document.getElementsByTagName(‘input’);

  4.         for (var i = 0; i < inputs.length; i++)
    {

  5.             inputs[i].onclick =
    function () {

  6.                 for (var c = 0; c < inputs.length; c++)
    {

  7.                     if(inputs[c].type==”button”) {

  8.                         inputs[c].value = ‘哈哈哈’;

  9.                     }

  10.                 }

  11.                 this.value
    = ‘呜呜’;

  12.             };

  13.         }

  14.     };

  15. </script>

Eg:利用停车计时器完毕利用表明的等待时间。

  1. <script type=”text/javascript”>

  2.     window.onload = function () {

  1.         var ss = 4;

  2.         //这里运维机械漏刻

  3.            var
    time=setInterval(function() {

  4.                var sa =
    document.getElementById(‘btn1’);

  5.                if (ss > 0) {

  6.                    sa.value = ‘请稍等几分钟’ + ss + ”;

  7.                    ss–;

  8.                } else {

  9.                    sa.value = ‘同意’;

  10.                    sa.disabled = false;

  11.                    clearInterval(time);

  1.                }

  2.            }, 1000);

  3.     };

  4. </script>

àdocument.createElement(‘标签名’);

  1. <script type=”text/javascript”>

  2.     window.onload = function() {

  3.         document.getElementById(‘btn’).onclick
    = function() {

  4.             var alink =
    document.createElement(‘a’); //动态创制成分

  5.             alink.href = ”;

  6.             alink.target = ‘_black’;

  1.             alink.innerText = ‘百度’;
  1.             document.getElementById(‘div1’).appendChild(alink);
    //将其增添到div中.

  2.  

  3.             var btton =
    document.createElement(‘input’);

  4.             btton.type = ‘text’;

  5.             document.getElementById(‘div1’).appendChild(btton);

  1.         };

  2.     };

  3. </script>

删除层申月素

  1. document.getElementById(‘btn1’).onclick
    = function() {

  2.     var sss =
    document.getElementById(‘div1’);

  3.     while (sss.firstChild) {

  4.         sss.removeChild(sss.firstChild);

  1.     }

  2. };

***:在前后相继中需求剖断项目,我们能够运用typeof()来获得其变量的花色。

innerText.和innerHTML的区别

本条就是

图片 1

Eg:往table中增添内容。

上面包车型客车dict格式是json的格式,也是一种键值对的花样。

  1. <title></title>

  2. <script type=”text/javascript”>

  3.     var dict = {

  4.         ‘百度’: ”,

  5.         ‘京东’: ”,

  6.         ‘淘宝’: ”,

  7.     };

  8.     window.onload = function() {

  9.         document.getElementById(‘btn’).onclick
    = function() {

  10.             var table =
    document.createElement(‘table’);

  11.             table.border = ‘1’;

  12.             table.backgroundColor =
    ‘red’;

  13.             for (var key in dict) {

  14.                 var tr =
    document.createElement(‘tr’);

  15.                 var td1 =
    document.createElement(‘td’);

  16.                 td1.innerHTML = key;

  1.                 var td2 =
    document.createElement(‘td’);

  2.                 td2.innerHTML = ‘<a
    href=”‘%20+%20dict[key]%20+%20′”>’ +
    key + ‘</a>’;

  3.                 tr.appendChild(td1);

  1.                 tr.appendChild(td2);
  1.                 table.appendChild(tr);
  1.             }

  2.             document.body.appendChild(table);

  1.         };

  2.     };

  3. </script>

Js操作样式

注意:

修改成分的样式不是安装class属性,而是className属性。class是js中的多少个保留字,属性不能应用重要字,保留字就改为了classname。

选择办法,属性名.style,注意这里的质量名大概和css中的名字不一致,大家要注意区分。

  1. <script type=”text/javascript”>

  2.     window.onload = function() {

  3.         document.getElementById(‘btn’).onclick
    = function() {

  4.             var div =
    document.getElementById(‘div’).style;

  5.             div.backgroundColor = ‘red’;

  1.             div.border = ‘1px solid
    blue’;

  2.             div.width = ‘200px’;

  3.             div.height = ‘400px’;

  1.             div.fontFamily = ‘楷体’;
  1.             div.styleFloat = ‘right’;
  1.         };

  2.         document.getElementById(‘btn1’).onclick
    = function() {

  3.             document.getElementById(‘div’).style.display
    = ‘none’;

  4.         };

  5.     };

  6. </script>

相关文章