dom | 易学教程

How to use createElement to create a new table?

阅读更多关于 How to use createElement to create a new table?

问题 Why the following code doesn't work? <html> <head> <script type="text/javascript"> function addTable() { var table = document.createElement('table'); table.innerHTML = "<tr><td>123</td><td>456</td></tr>"; document.getElementById("addtable").appendChild(table); } </script> </head> <body> <input type="submit" value="New Table" onClick="addTable()"/> <div id="addtable"></div> </body> </html> 回答1: To the best of my knowledge, setting the innerHTML property of a table element or table section

DOM--常用API

阅读更多关于 DOM--常用API

1.DOM树的添加一个新元素的添加分为三个步骤 1）创建新新元素例： var div =document.createElement(“div”); 2)设置其内容和属性例： div.setAttribute(“id”, “boxl”); 3）将元素添加到DOM树上 1. 添加：appendChild（）在父标签中追加元素相当于push的用法在任何的元素上追加子元素例：document.body.appendChild(div); .2、插入：在现有的子元素之前加入新元素语法：insertBefore(插入的元素, 现有的元素); 3.替换：替换现有的子元素 replaceChild(新元素, 被替换的元素); 4.删除例： strong i p 修改样式(style的属性) 在设置样式时只能设置标签的行内样式，同理也只能获取行内样式例： var h1 = document.getElementsByTagName(“h1”)[0]; h1.style.backgroundColor = “#0f0”; h1.style.color = “#00f”; var h1Style = window.getComputedStyle(h1, null); console.log(h1Style.width);// 300

Get the files chosen using the input type file (multiple) and store them in an array

阅读更多关于 Get the files chosen using the input type file (multiple) and store them in an array

问题 In my HTML i select multiple files. <input type="file" id="img" multiple> I want to store each element in an array so that i can print the file source. I have done this in my javascript but it does not work. function loadfiles() { var x=document.getElementById("img"); for (var i=0;i<x.length;i++) { document.write(x.elements[i].src); } } 回答1: The property files gets you an array of all the files selected by the file input. So the loadfiles function should be modified to following: function

Vue 列表渲染中的key

阅读更多关于 Vue 列表渲染中的key

首先看一下官网的论述： 1 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。 2 3 这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。 4 5 为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)： 6 7 <div v-for="item in items" :key="item.id"> 8  9 </div> 10 建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。 11 12 因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途

实现dom元素拖动

阅读更多关于实现dom元素拖动

本文主要写一下如何实现dom元素拖动，目前使用jquery库实现之。主要的注释附在代码中，大家可以根据代码画一个小的窗口模型图，以便于理解。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>实现dom元素拖动</title> 6 <style> 7 .dialog { 8 position: absolute; 9 top: 0; 10 left: 0; 11 width: 500px; 12 height: 400px; 13 background-color: blue; 14 } 15 </style> 16 <script src="js/jquery-1.7.2.js"></script> 17 </head> 18 <body> 19 <div class="dialog dialog-drag">拖动</div> 20 <script> 21 (function($) { 22 var windowWidth, 23 windowHeight, 24 mouseToDialogX, 25 mouseToDialogY, 26 dialogWidth, 27 dialogHeight; 28 var $target, 29 $doc = $(document); 30 var

jquery获取、改变元素属性值

阅读更多关于 jquery获取、改变元素属性值

/标签的属性称作元素属性，在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。 //==================================操作元素属性================================== //返回元素指定属性值 var txt1_val=$("#txt1").attr("value"); //通过元素的DOM属性名更改DOM属性值 $("#txt1").attr({ value : "txt1_value" , className : "txt1_class" }); //通过指定元素属性改变元素属性值 $("#txt1").attr("class","txt1_class2"); //给指定元素属性赋值，通过后面捆绑的方法返回值 $("#txt1").attr("class",function(){ return "txt1_class3"; }) //移除指定的元素属性 $("#txt1").removeAttr("class"); 来源： https://www.cnblogs.com/huangcan/p/4735084.html

上层建筑——DOM元素的特性与属性（dojo/dom-attr）

阅读更多关于上层建筑——DOM元素的特性与属性（dojo/dom-attr）

　　上一篇返本求源中，我们从DOM基础的角度出发，总结了特性与属性的关系。本文中，我们来看看dojo框架是如何处理特性与属性的。dojo框架中特性的处理位于dojo/dom-attr模块属性的处理为与dojo/dom-prop模块中。 attr.set（）　　方法的函数签名为： require(["dojo/dom-attr"], function(domAttr){ result = domAttr.set("myNode", "someAttr", "value"); }); 　　“someAttr”代表特性名称，但有时候也可以是一些特殊的属性名，如：‘textContent’：　　　　可以看到上图中使用attr设置innerText只会在html标签中增加innerText这个自定义特性，而无法改变文本，使用textContent却能够达到改变文本的目的。其中缘由就是因为在attr模块建立了forceProps字典，在此字典中的key全部使用prop模块来设置： forcePropNames = { innerHTML: 1, textContent:1, className: 1, htmlFor: has("ie"), value: 1 } 　　set（）方法中主要处理以下几件事： “someAttr”除了可以是字符串外，还可以是key-value对象

JavaScript DOM–事件操作

阅读更多关于 JavaScript DOM–事件操作

事件注册事件给元素添加事件，为注册事件或者绑定事件注册事件两种方式传统方式监听事件方式事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.addEventListener(type, listener, [useCapture]) 参数type：事件类型字符串，不要on 如click，mouseover 参数listener：事件处理函数，触发的时候要做的事情参数useCapture：可选，是一个布尔值，默认false attacheEvent() 事件监听 (IE678支持) evetagrget.attachEvent(eventNameWithOn, callback) 参数eventNameWithOn：事件类型字符串，不要on 如click，mouseover 参数callback：事件处理函数，触发的时候要做的事情 <body> <button>传统注册事件</button> <button>addEventListener ie9以上</button> <button>attachEvent ie678</button> <script> var btns = document.querySelectorAll('button'); // 传统注册事件 btns[0].onclick =

JS笔记 ( 二十 ) DOM 的基本操作

阅读更多关于 JS笔记 ( 二十 ) DOM 的基本操作

文章目录 1. DOM 的定义 2. 对节点的增删查改 [1] 查看元素节点 document 代表整个文档 document 对象中的获取 / 查看元素的方法 1) document.getElementById() 2) document.getElementsByTagName() 3) document.getElementsByClassName() 4) document.getElementsByName() 5) document.querySelector() 6) document.querySelectorAll() [2] 遍历节点树 1) parentNode 2) childNodes 3) firstChild 和 lastChild 4) nextSibling 和 previousSibling [3] 基于元素节点树的遍历 1) parentElement 2) children 3) childElementCount 4) firstElementChild 和 lastElementChild 5) nextElementSibling 和 previousElementSibling [4] 节点的四个属性 1) nodeName 2) nodeValue 3) nodeType 4) attributes 5) 节点的一个方法 Node

Use PhantomJS to extract html and text

阅读更多关于 Use PhantomJS to extract html and text

问题 I try to extract all the text content of a page (because it doesn't work with Simpledomparser) I try to modify this simple example from the manual var page = require('webpage').create(); console.log('The default user agent is ' + page.settings.userAgent); page.settings.userAgent = 'SpecialAgent'; page.open('http://www.httpuseragent.org', function (status) { if (status !== 'success') { console.log('Unable to access network'); } else { var ua = page.evaluate(function () { return document

订阅 dom