精华内容
下载资源
问答
  • HTML元素方法

    千次阅读 2019-04-27 10:54:28
    元素就是一段 HTML 代码,它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性(attribute),以控制它的显示方式与行为。 这就是元素的全部内容,它与 JavaScript 没有任何关联。 而 DOM 的作用...

    首先让我们来讨论一下 HTML 与 DOM 之间的区别。

    显然,普通的 <table> 元素就是一段 HTML 代码,它可以应用在任何一个以 .html 为扩展名的文件中。元素自带一系列特性(attribute),以控制它的显示方式与行为。

    这就是元素的全部内容,它与 JavaScript 没有任何关联。

    而 DOM 的作用是将你的 JavaScript 代码与文档中的 HTML 元素关联在一起,让你能够以对象的方式与这些元素进行交互。

    这就是所谓的文档对象模型。

    在 HTML 中的每个元素都对应着一个 DOM ‘接口’,其中定义了若干属性(property,通常会映射至 HTML 元素上的特性)与方法。举例来说,一个 <table> 元素对应着一个 HTMLTableElement 接口。

    你可以按以下方式获取某个元素的引用:

    const searchBox = document.getElementById('search-box');
    

    现在,你就可以访问该元素上定义的所有属性与方法了。打个比方,你可以通过 searchBox.value 访问它的 value 属性,也可以调用 searchBox.focus() 方法让光标移至输入框上。

    感谢你参加这个58秒的 DOM 入门培训课程,哈哈。

    现在的问题在于,大多数元素都没有提供什么有趣的方法。因此,除非你特意到官方文档规范上去搜索那些可能永远都用不到的东西,否则很容易忽略掉那些零散的小技巧。

    幸运的是,浏览规范与整理小技巧正是我用于避免陷入困境的两种最喜欢的方式。那么,让我们开始吧……

    如果你也希望尝试一下这些技巧,又恰好有一些浏览器 DevTools 可以使用的话,可以在元素树型结构中先选中某个元素,然后在控制台中输入 $0,它会返回给你一个所选中元素的引用。如果你需要返回该元素的对象,请输入 dir($0)

    在控制台中,你可以实现各种丰富的功能。

     

     

    1 table 的方法

    原始的 table 元素(时至今日仍然是网站布局方法里的第一名)本身自带许多精巧的方法,使用这些方法创建表格就像搭建宜家里的桌子一样简单。

    以下是部分实用的方法。

    const tableEl = document.querySelector('table');
    const headRow = tableEl.createHead().insertRow();
    headerRow.insertCell().textContent = 'Make';
    headerRow.insertCell().textContent = 'Model';
    headerRow.insertCell().textContent = 'Color';
    const newRow = tableEl.insertRow();
    newRow.insertCell().textContent = 'Yes';
    newRow.insertCell().textContent = 'No';
    newRow.insertCell().textContent = 'Thank you';
    

    整段代码里完全用不着使用 document.createElement() 方法。

    如果你在一个 table 元素上直接调用 .insertRow() 方法,它甚至会自动为你插入一个 <tbody> 元素,是不是很棒?

    2 scrollIntoView()

    你知道吗?当页面的 URL 中包含 #something 元素时,一旦页面加载,浏览器就会自动滚动至具有这个 ID 的元素之处。

    这确实是一项很贴心的功能,但如果你在页面加载之后再渲染元素,这项功能就不起作用了。

    不过,你也可以通过以下方式,手动地让这项功能重新生效:

    document.querySelector(document.location.hash).scrollIntoView();
    

    3 hidden

    好吧,hidden 或许不是一个方法,但如果你提出抗议,那我也要争论一下:在 hidden 的背后很可能对应着一个 setter,这可是一个货真价实的方法,对不对?

    不管怎样,你是否曾经为了隐藏某个元素而使用过 myElement.style.display = 'none' 这种方法呢?如果是的话,请别再这么做了!

    只需调用 myElement.hidden = true ,即可实现元素隐藏的功能。

    4 toggle()

    嗯,toggle 也不算是元素的方法,它实际上是元素属性上的一个方法。严格来说,这是一种为元素添加或删除某个 class 的方法,具体做法是 myElement.classList.toggle('some-class') 。

    如果你曾经通过 if 条件语句为元素添加 class,那就应该赶紧改用这种做法。

    正确的方式是为 toggle 方法传入第二个参数,如果该参数返回 true ,则指定的 class 就会添加至元素上。

    el.classList.toggle('some-orange-class', theme === 'orange');
    

    我知道你在想些什么:这种写法违背了 ‘toggle’ 这个词的本义(开关),那些从 IE 时代过来的开发者们都这么想,他们断言应当彻底摒弃使用第二个参数的做法。

    所以,我收回我的话。不必坚持这种写法了,各位请随意!

    5 querySelector()

    好吧,你当然知道这个方法,但据我推测,应该只有 17% 的开发者才知道,该方法可以使用在任意元素上。

    打个比方,myElement.querySelector('.my-class') 的作用是返回在 myElement 的子代中包含 my-class 这个 class 的所有元素。

    6 closest

    该方法可在任意元素上使用,它能够向上查找元素的树型结构,可以理解为 与 querySelector() 相反的方法。因此,我可以通过以下方法获取当前内容的对应标头:

    myElement.closest('article').querySelector('h1');
    

    这段方法首先向上找到最近的 <article> 元素,然后再向下找到最近的 <h1> 元素。

    7 getBoundingClientRect()

    在对 DOM 元素调用该方法时,将返回一个包含其空间结构详细信息的简单对象。

    {
      x: 604.875,
      y: 1312,
      width: 701.625,
      height: 31,
      top: 1312,
      right: 1306.5,
      bottom: 1343,
      left: 604.875
    }
    

    不过,在调用该方法时需要注意两点:

    • 调用该方法会导致元素的重绘,根据设备与页面复杂程度的不同,重绘的时间可能会占用几毫秒。因此,如果你需要重复地调用该方法,例如在使用动画的场景下,需要特别注意这一点。
    • 并非所有的浏览器都会返回这些值,他们有这个责任么?

    8 matches()

    假设我需要检查某个元素是否包括一个特定的 class。

    这是最复杂的方式:

    if (myElement.className.indexOf('some-class') > -1) {
      // do something
    }
    

    比上面的好一点,但和本文没什么关系:

    if (myElement.className.includes('some-class')) {
      // do something
    }
    

    最佳方式:

    if (myElement.matches('.some-class')) {
      // do something
    }
    

    9 insertAdjacentElement()

    我今天才刚学到这一条!它的作用类似于 appendChild() ,但能够更好地控制插入子元素的具体位置。

    parentEl.insertAdjacentElement('beforeend', newEl) 与 parentEl.appendChild(newEl) 的作用是一样的,但除此之外,你还可以指定 beforebeginafterbegin 或 afterend 这几个参数值,元素将按这些值的名称所示插入相应的位置。

    多么强大的控制能力!

    多棒的点子。

    10 contains()

    你有没有遇到过这样的情形,需要知道某个元素是否被包含在另一个元素中?至少我本人经常会遇到这样的问题。

    打个比方,假设我在处理一个鼠标点击事件时,需要知道它是发生在一个模态窗口中还是发生在外面(这样我才能够关闭这个窗口),我大概会这么做:

    const handleClick = e => {
      if (!modalEl.contains(e.target)) modalEl.hidden = true;
    };
    

    代码中的 modalEl 是模态窗口的引用,而 e.target 则代表各种发生点击事件的元素。

    有趣的是,每当遇到这种情形,在我第一遍写代码的时候,100%的概率会将其中的判断逻辑写反。

    哪怕是我提高了警惕,并在保存代码之前尝试将逻辑颠倒过来写,仍然还是写错。

    #11 getAttribute()

    这毫无疑问是所有元素方法中最没用的一个,但有一个场景除外。

    你是否记得,我在本文的开头部分曾提到,对象的属性 property 通常也会映射到它的特性 attribute 中(我在上文中特别用粗体强调了这一点,注意不是斜体)?

    但在某一个场景中,这种假设并不成立,这就是某个元素的 href 特性,例如 <a href="/animals/cat">Cat</a> 。

    调用 el.href 不会返回 /animals/cat,这可能与你的猜测不符。原因在于 <a> 元素实现了 HTMLHyperlinkElementUtils接口,该接口提供了一系列辅助属性,例如 prototol 与 hash 等等,以展现与链接的目标相关的值。

    href 就是其中一个实用的属性,它将返回完整的 URL,并去掉无用的空格,而不是返回在特性中所指定的相对 URL。

    这样一来,如果你需要获取 href 特性中的字符串字面值,就只能使用 el.getAttribute('href') 方法了。

    12 dialog 元素的三大法宝

    <dialog> 是一个相对较新的元素,它带来了两个还算能用的方法,和一个非常棒的方法。其中show() 和 close() 方法的功能与你所想象的一样,我感觉还算可以。

    而 showModal() 方法能够将 <dialog> 元素显示在页面的顶层,居中对齐,这正是所期望的模态窗口行为。你无需指定 z-index,或者手动添加一个灰色的背景,也不需要监听 esc 按键以关闭此窗口。浏览器能够理解模态窗口的工作方式,并自动完成你所期望的行为。

    这真是太棒了。

    13 forEach()

    某些情况下,当你获取到一个元素列表的引用时,可以通过 forEach() 方法进行迭代式调用。

    用 for() 进行循环已经是 2014 年代的老古董了。

    假设你需要记录页面中所有链接的 URL,可以输入以下代码,只要你不介意看到报错。

    document.getElementsByTagName('a').forEach(el ==> {
      console.log(el.href);
    });
    

    也可以这么做:

    document.querySelectorAll('a').forEach(el ==> {
      console.log(el.href);
    });
    

    问题出在 getElementsByTagName 与其他类似的 get… 方法返回的是一个 HTMLCollection 接口,而 querySelectorAll返回的是一个 NodeList 接口。

    而 NodeList 接口为我们提供了 forEach() 方法(此外还包括 keys()values(),和 entries() 等方法 )。

    理想的情况下,最好是每个方法都只返回简单的数组,而不是返回一些类似数组的对象。不过别担心,ECMA 大神为我们提供了 Array.from() 方法,它能够把所有这些类数组对象转化为一个真正的数组。

    所以,这样的代码就能够正常工作:

    Array.from(document.getElementsByTagName('a')).forEach(el ==> {
      console.log(el.href);
    });
    

    奖励关卡:创建了一个数组之后,你就能够对其使用 map() 、filter() 和 reduce() 以及其他各种数组方法了。打个比方,先不管目的是什么,总之你可以按以下方式返回所有外部链接的数组:

    Array.from(document.querySelectorAll('a'))
      .map(el => el.origin)
      .filter(origin => origin !== document.origin)
      .filter(Boolean);
    

    我最喜欢的一个方法是 .filter(Boolean),它肯定会给将来的我在调试问题时带来无穷的烦恼,哈哈。

    14 表单

    或许你已经知道,<form> 有一个 submit() 方法。但或许你不知道表单还有一个 reset() 方法,而且当你需要对表单元素进行验证时,还可以调用 reportValidity() 方法。

    此外,你也可以通过对表单的 elements 属性加上元素的 name 特性 的方式调用它的属性。打个比方,myFormEl.elements.email 将返回属于某个 <form> 中的 <input name="email" /> 元素(‘属于’,并不代表它一定是一个‘子元素’)。

    好吧,其实刚才我是骗你的。elements 并不会返回一个元素列表,而是返回一个控件列表(显然它不是一个数组,因为没必要这么做)。

    举例来说:假设你有三个单选按钮,每个都有相同的名称 animal,那么 formEl.elements.animal 将返回一个单选按钮集的引用(一个控件,三个元素)。

    而 formEl.elements.animal.value 将返回所选中的单选按钮的值。

    这种语法看起来非常古怪,让我们来分解一下看看:formEl 是一个元素,elements 则对应 HTMLFormControlsCollection 接口,这并非一个真正的数组,其中的每一项内容也未必代表一个 HTML 元素。animal是多个单选按钮的集合,只是因为他们具有相同的 name 特性才聚集在一起(RadioNodeList 接口就是为此而生的),而 value 则返回该集合中所选中的那个单选按钮的 value 特性。

    非常直观,嗯……

    展开全文
  • Javascript设置HTML元素的可见性

    千次阅读 2021-03-18 21:04:06
    HTML中设置元素可见性有两种方法: 隐藏后,该元素仍然占据其所有面积。<button type="submit" id="btnSubmit" style="visibility:hidden">保存</button> <button type="submit" id="btnSubmit" ...

    元素可见性属性

    在HTML中设置元素可见性有两种方法:

    1. 隐藏后,该元素仍然占据其所有面积。
    <button type="submit" id="btnSubmit" style="visibility:hidden">保存</button>
    <button type="submit" id="btnSubmit" style="visibility:visible">保存</button>
    
    1. 隐藏后整体消失
    <button type="submit" id="btnSubmit" style="display:none">保存</button>
    <button type="submit" id="btnSubmit" style="display:display">保存</button>	
    

    JS设置元素可见性

    使用原生JS设置

    document.getElementById("btnSubmit").style.display="none";
    document.getElementById("btnSubmit").style.display="block";
    

    jQuery设置元素可见性

    使用jquery设置

    $("#btnSubmit").css("display","none");
    $("#btnSubmit").css("display","block");
    

    通过调用show()和hide()函数

    $("#btnSubmit").hide();
    $("#btnSubmit").show();
    
    展开全文
  • 注意:内容里必须包含html元素标签。 两个方法可以同时使用 在P元素之前插入span元素 这是一个段落。 这是另一个段落。 在P元素之前插入span元素 Hello world! 这是一个段落。 Hello world! 这是另一个段落。 ...

    前言

     after()方法,before() 方法,append() 方法,prepend() 方法,appendTo() 方法,prependTo() 方法,insertAfter() 方法,insertBefore() 方法,wrap()方法,wrapAll() 方法,wrapInner() 方法 。各个方法的使用,利弊,BUG等做了深入说明

    这种操作属于【jQuery HTML / CSS 方法

    具体API请看

    https://www.runoob.com/jquery/jquery-ref-html.html

      

    第一种:在被选元素前后插入内容

    在被选元素后插入内容 请使用 after()方法

    在被选元素前插入内容,请使用 before() 方法

    注意after()方法和before() 方法不能同时出现使用,会出现BUG的

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").after("<p>Hello world!</p>");
      });
    });
    </script>
    </head>
    <body>
    
    <button>在每个P元素后插入内容</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

     结果

    <body style="">
    
    <button>在每个P元素后插入内容</button>
    <p>这是一个段落。</p><p>Hello world!</p>
    <p>这是另一个段落。</p><p>Hello world!</p>
    
    
    </body>

    如果两个方法同时执行,结果如下

    代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
    	$("p").before("<p>前面</p>");
        $("p").after("<p>后面</p><hr>");
      });
    });
    </script>
    </head>
    <body>
    
    <button>在每个P元素后插入内容</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

     结果

     

    <body style="">
    
    <button>在每个P元素后插入内容</button>
    <p>前面</p><p>后面</p><hr><p>这是一个段落。</p><p>后面</p><hr>
    <p>前面</p><p>后面</p><hr><p>这是另一个段落。</p><p>后面</p><hr>
    
    
    </body>

    为了避免上面错误,我们可以利用for循环遍历

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
    	  var _p=$("p");
    	  for(var i=0; i<_p.length;i++)
    	  {
    	   _p.eq(i).before("<p>前面</p>");
           _p.eq(i).after("<p>后面</p><hr>");
    	   }
    	  
      });
    });
    </script>
    </head>
    <body>
    
    <button>在每个P元素后插入内容</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

    结果

    <body style="">
    
    <button>在每个P元素后插入内容</button>
    <p>前面</p><p>这是一个段落。</p><p>后面</p><hr>
    <p>前面</p><p>这是另一个段落。</p><p>后面</p><hr>
    
    
    </body>

     

    第二种:在被选元素的开始结尾插入内容

    append() 方法在被选元素的结尾插入指定内容。

    prepend() 方法在被选元素的开头插入指定内容。

    注意append()方法和prepend() 方法不能同时出现使用,会出现BUG的。

    如果想要避免,请参考,第一种的for循环遍历代码

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("#btn1").click(function(){ 
    		$("p").append(" <b>后面插入</b>.");
    	});
    	 
    });
    </script>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <p>这是另一个段落</p>
     
    <button id="btn1">插入文本</button> 
    
    </body>
    </html>

    结果

    <body style="">
    
    <p>这是一个段落。 <b>后面插入</b>.</p>
    <p>这是另一个段落 <b>后面插入</b>.</p>
     
    <button id="btn1">插入文本</button> 
    
    
    </body>

     


    第三种:在被选元素的结尾插入 HTML 元素

    appendTo() 方法在被选元素的结尾插入 HTML 元素。

    prependTo() 方法在被选元素的开头插入 HTML 元素。

    这两个方法 可以同时使用。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$("<span>Hello World!</span>").appendTo("p");
    	});
    });
    </script>
    </head>
    <body>
    
    <button>在每个P元素结尾插入span元素。</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

    结果

    <body style="">
    
    <button>在每个P元素结尾插入span元素。</button>
    <p>这是一个段落。<span>Hello World!</span></p>
    <p>这是另一个段落。<span>Hello World!</span></p>
    
    
    </body>

    appendTo()和prependTo()两个同时使用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		 $("<span>开头【</span>").prependTo("p");
    		$("<span>】结尾</span>").appendTo("p");
    	});
    });
    </script>
    </head>
    <body>
    
    <button>在每个P元素结尾插入span元素。</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

    <body style="">
    
    <button>在每个P元素结尾插入span元素。</button>
    <p><span>开头【</span>这是一个段落。<span>】结尾</span></p>
    <p><span>开头【</span>这是另一个段落。<span>】结尾</span></p>
    
    
    </body>

     


    第四种:在被选元素前后插入 HTML 元素

    insertAfter() 方法在被选元素后插入 HTML 元素。

    insertBefore() 方法在被选元素前插入 HTML 元素。

    注意:内容里必须包含html元素标签。

    两个方法可以同时使用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$("<span>Hello world!</span>").insertBefore("p");
    	});
    });
    </script>
    </head>
    <body>
    
    <button>在P元素之前插入span元素</button>
    <br><br>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

    <body style="">
    
    <button>在P元素之前插入span元素</button>
    <br><br>
    <span>Hello world!</span><p>这是一个段落。</p>
    <span>Hello world!</span><p>这是另一个段落。</p>
    
    
    </body>

    insertAfter() 方法和insertBefore() 方法同时使用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$("<span>前【</span>").insertBefore("p");
    		$("<span>】Hello world!</span>").insertAfter("p");
    		
    	});
    });
    </script>
    </head>
    <body>
    
    <button>在P元素后面插入span元素</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    
    </body>
    </html>

    <body style="">
    
    <button>在P元素后面插入span元素</button>
    <span>前【</span><p>这是一个段落。</p><span>】Hello world!</span>
    <span>前【</span><p>这是另一个段落。</p><span>】Hello world!</span>
    
    
    </body>

    ------

    如果前面这四个不是你想要的,那么下面就一定是你想要的

    ------


    第五种:wrap()在每个被选元素的周围用 HTML 元素包裹起来

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$("p").wrap("<div></div>");
    	});
    });
    </script>
    <style type="text/css">
    div{background-color:yellow;}
    </style>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>给每个P元素包裹一个div元素</button>
    
    </body>
    </html>

    <body style="">
    
    <div><p>这是一个段落。</p></div>
    <div><p>这是另一个段落。</p></div>
    <button>给每个P元素包裹一个div元素</button>
    
    
    </body>

    从这个结果可以看出,他是把每个P 标签都用div给包裹了


    第六种:wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$("p").wrapAll("<div></div>");
    	});
    });
    </script>
    <style type="text/css">
    div{background-color:yellow;}
    </style>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>给所有p元素包装一个div元素</button>
    
    </body>
    </html>

    <body style="">
    
    <div><p>这是一个段落。</p><p>这是另一个段落。</p></div>
    
    <button>给所有p元素包装一个div元素</button>
    
    
    </body>

    从这个结果可以看出,他用div把所有P标签一起给包裹了


    第七种:wrapInner() 方法 

     wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    	$("button").click(function(){
    		$("p").wrapInner("<b></b>");
    	});
    });
    </script>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>在每个p元素的内容上包装一个b元素</button>
    
    </body>
    </html>

    <body style="">
    
    <p><b>这是一个段落。</b></p>
    <p><b>这是另一个段落。</b></p>
    <button>在每个p元素的内容上包装一个b元素</button>
    
    
    </body>

    从这个结果可以看出,他是把每个P 标签里的内容都用b标签给包裹了

     

     

     

     

    展开全文
  • JS 创建HTML元素的方法

    万次阅读 2019-01-21 22:20:42
    元素创建的三种方式:  * 1. document.write("标签的代码及内容");  * 2. 对象.innerHTML="标签及代码";  * 3. document.createElement("标签的名字"); 1、document.write("...

    元素创建的三种方式:
        * 1. document.write("标签的代码及内容");
        * 2. 对象.innerHTML="标签及代码";
        * 3. document.createElement("标签的名字");

    1、document.write("标签的代码及内容")方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    
    </head>
    <body>
    <input type="button" value="创建一个p" id="btn"/>
    
    <script src="common.js"></script>
    <script>
      //document.write("标签代码及内容");
      my$("btn").onclick=function () {
        document.write("<p>这是一个p</p>");
      };
     // document.write("<p>这是一个p</p>");
    
      //document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
    
    
    </script>
    </body>
    </html>

    缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉

    2、对象.innerHTML="标签及代码" 方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div{
          width: 300px;
          height: 200px;
          border:2px solid pink;
        }
      </style>
    </head>
    <body>
    <input type="button" value="创建一个p" id="btn" />
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
      //点击按钮,在div中创建一个p标签
      //第二种方式创建元素: 对象.innerHTML="标签代码及内容";
    
      my$("btn").onclick=function () {
        my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
      };
    </script>
    </body>
    </html>

    3、document.createElement("标签的名字")方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
      <style>
        div {
          width: 200px;
          height: 150px;
          border: 2px dashed pink;
        }
      </style>
    </head>
    <body>
    <input type="button" value="创建p" id="btn"/>
    <div id="dv"></div>
    <script src="common.js"></script>
    <script>
      //第三种方式创建元素
      //创建元素
      //document.createElement("标签名字");对象
      //把元素追加到父级元素中
      //点击按钮,在div中创建一个p
    
      my$("btn").onclick = function () {
        //创建元素的
        var pObj = document.createElement("p");
        setInnnerText(pObj, "这是一个p");
        //把创建后的子元素追加到父级元素中
        my$("dv").appendChild(pObj);
      };
    
    
    </script>
    </body>
    </html>

    common.js

    /**
     * Created by Administrator on 2017-09-18.
     */
    
    function my$(id) {
        return document.getElementById(id);
    }
    
    //设置任意元素的中间的文本内容
    function setInnnerText(element,text) {
        if(typeof element.textContent=="undefined"){
            element.innerText=text;
        }else{
            element.textContent=text;
        }
    }
    //获取任意元素的中间的文本内容
    function getInnerText(element) {
        if(typeof element.textContent=="undefined"){
            return element.innerText;
        }else{
            return element.textContent;
        }
    }
    
    
    //获取任意一个父级元素的第一个子级元素
    function getFirstElementChild(element) {
        if(element.firstElementChild){//true--->支持
            return element.firstElementChild;
        }else{
            var node=element.firstChild;//第一个节点
            while (node&&node.nodeType!=1){
                node=node.nextSibling;
            }
            return node;
        }
    }
    //获取任意一个父级元素的最后一个子级元素
    function getLastElementChild(element) {
        if(element.lastElementChild){//true--->支持
            return element.lastElementChild;
        }else{
            var node=element.lastChild;//第一个节点
            while (node&&node.nodeType!=1){
                node=node.previousSibling;
            }
            return node;
        }
    }
    
    //为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
    function addEventListener(element,type,fn) {
        //判断浏览器是否支持这个方法
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,fn);
        }else{
            element["on"+type]=fn;
        }
    }
    
    

     

    展开全文
  • HTML元素的隐藏方式

    万次阅读 2019-07-15 14:16:06
    一、元素的隐藏方式: 1.display:none; 特点: 真正的隐藏元素。 (1) 将元素的display属性设置为none能够确保元素不可见; (2) 使用这个属性,被隐藏元素不占用任何空间; (3) 使用display:none隐藏元素,不能直接跟...
  • 调整html元素大小 resize

    千次阅读 2018-02-01 22:18:53
    resize 属性规定是否可由用户调整元素的尺寸。 取值: none:默认,用户无法调整元素的尺寸。 Both:用户可调整元素的高度和宽度。 Horizontal:用户可调整元素的宽度。 Vertical:用户可调整元素的高度。 缺点...
  •  本章将学习document对象以及其操作html元素的相关知识,本章知识尤为重要! 方法 1.概念 严格的意义上来将,document对象是window对象的一个属性,浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象...
  • 动态添加/删除HTML元素

    千次阅读 2018-09-18 19:58:12
    动态添加/删除HTML元素 &amp;lt;HTML&amp;gt; &amp;lt;HEAD&amp;gt; &amp;lt;title&amp;gt;动态添加/删除HTML元素&amp;lt;/title&amp;gt; &amp;lt;style type=&...
  • jQuery 选择器 选取当前 HTML 元素

    万次阅读 2019-09-20 15:59:35
    选取当前 HTML 元素例子   <!DOCTYPE html> <html> <title>test $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); 这是标题 这是一个段落。 这是另外一个段落...
  • 显示隐藏Html元素(div等)

    千次阅读 2019-05-28 09:38:38
    div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:  style="visibility: none;"  document.getElementById("typediv1").style.visibility="hidden";... document.getElementById("typediv1...
  • javascript动态插入html元素

    千次阅读 2018-09-03 15:29:42
    转载:javascript动态插入html元素 主要有是两种方案: 1.使用DOM //使用createElement创建元素 var dialog = document.createElement('div'); var img = document.createElement('img'); var btn = ...
  • js控制html元素的隐藏和显示

    千次阅读 2017-10-10 13:36:07
    方法一:document.getElementById("ElementId").style.visibility="hidden"; document.getElementById(...元素隐藏后,页面的位置仍然被控件占用,显示空白。方法二:document.getElementById("ElementId").styl
  • HTML元素的宽度计算

    千次阅读 2016-06-09 20:21:11
    1.HTML块级元素的宽度/高度是不包括margin,border,padding的. 如图所示: 2.JS中的offsetWidth是包括border在内的. var oDiv=document.getElementById('div1'); alert("offsetWidth="+oDiv.offsetWidth); alert...
  • 在vue 中,添加html元素,并在元素中添加点击事件,用原生的onclick来触发事件,将事件挂在window上 ... //创建html元素 let contentHTML = "<div style='width:80px; font-size:12px;font-weight:bold;
  • HTML 元素内容超出尺寸范围怎么办?

    千次阅读 2019-01-06 17:05:15
    元素的内容部分超出尺寸范围,称为溢出。默认情况下,溢出部分仍然可见。
  • HTML元素和标签的区别

    千次阅读 2017-05-08 09:05:33
    元素和标签的区别也不必太在意,实际工作中我们都直接以标签统称。
  • 在CSS中,div、p、header等元素是块级元素,默认占据一整行;两个同一级别的兄弟块级元素,会自动换行显示。如果需要两个兄弟块级元素横向排列显示,需要设置CSS属性。 一:使用浮动 1、使用浮动float,方法如下...
  • 在jq中实现动态增加、修改元素有六种方法可以使用。append 插入在当前元素内、最后一个子节点后面prepend 插入到当前元素内、第一个子节点前面after 在元素后面追加,同级 m.after(n); 在m后面追加n before 在元素...
  • javascript如何动态插入html元素呢?

    万次阅读 2018-07-03 11:34:27
    主要有是两种方案: ... //使用createElement创建元素 var dialog = document.createElement('div'); var img = document.createElement('img'); var btn = document.createElement('input'); var con...
  • javascript获取html元素的几种方法

    万次阅读 2016-12-17 21:13:23
    1.通过id获取html元素 我是div,我的id是mydiv var x=document.getElementById("mydiv").innerHTML; document.write(x+"(我是通过javascript获取的)"); 2.通过class来获取html元素  1)一个类名的...
  • HTML元素发生样式冲突,覆盖css

    千次阅读 2017-08-29 11:09:16
    有时你的HTML元素会得到相互冲突的多个样式,浏览器读取css的顺序是从上到下,这意味着,在发生冲突时,浏览器会使用最后的css声明,无论在 style 元素 CSS 的哪个位置进行声明,id 声明都会覆盖 class 声明。
  • HTML元素的显示优先级

    万次阅读 2016-01-08 15:04:59
    一、HTML元素的显示优先级(显示层次问题,哪个在上哪个在下!总是显示在最前面)  帧元素>HTML元素优先,表单元素总>非表单元素优先  HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本...
  • html元素水平居中的几种方法

    万次阅读 2016-08-14 00:45:39
    下面我将一一的介绍关于html元素水平居中的几种方式 一:对于行内元素采用text-align:center;的方式 二: 采用margin:0 auto;来实现水平居中显示 三: 用table实现 四; 块级的元素但是...
  • vue 实现点击“增加“”按钮,添加一个HTML元素 场景描述:vue中经常需要点击一次增加按钮,添加一个HTML元素,比如一个div。 初始状态: 点击“增加”按钮后,添加一套这样的元素: 实现思路: 可以利用v-...
  • html元素与间距

    千次阅读 2015-10-13 22:37:03
    HTML元素总体分为内联元素和块元素。还有其他一些特别的类型和默认类型,更有一些元素要根据实际情况才有判断它是内联还是块元素。与一般分类的特性还是有点区别。就是这些小差别,有时候造成一些难以发现的间距问题...
  • 如何将一个HTML元素添加到DOM树中

    千次阅读 2018-09-03 09:01:09
    jQuery提供了append()、appendTo()等相关方法 可以将一个HTML元素添加到DOM树中。搜索引擎大全
  • JS 获取html元素宽高 及设置宽高

    万次阅读 2018-02-13 22:47:26
    获取html元素宽高的两种方式 // 首先是取到元素 var main = document.getElementById( 'main' ); // 第一种方式 var mainWidth = main.offsetWidth, mainHeight = main.offsetHeight; // 第二种方式 ...
  • css 禁止html元素被选中

    千次阅读 2016-07-31 11:10:05
    html{ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select:
  • jquery获得包含自身在内的html元素

    千次阅读 2017-05-08 10:08:53
    $(”).html()是获得选中元素下的子节点的html,不能包含自身元素。<div class="test"><p>hello,你好!</p></div> $(".test").prop("outerHTML"); 反之,我们要把更改包含选中自身的元素html代码的时候,可像下面...
  • 1.通过ID或者其他元素找到要处理的HTML对象:(举例通过ID) var obj=document.getElementById('id'); 2.操作此对象 添加属性:obj.setAttribute('attr_name','attr_value'); 获取属性值:obj.getAttribute('...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,918,035
精华内容 767,214
关键字:

html元素

友情链接: complex-networks-matlab.rar