집 >웹 프론트엔드 >JS 튜토리얼 >노드 작업을 위한 API, HTML DOM 노드 작업을 위한 기본 API를 전복_javascript 기술

노드 작업을 위한 API, HTML DOM 노드 작업을 위한 기본 API를 전복_javascript 기술

WBOY원래의: 2016-05-16 18:13:58880검색

第一次看到敏捷开发的定义，我就被敏捷开发迷住了。通俗来说，敏捷开发可以让我们用过的代码可以再次重用，因为是再次重用，所以相对安全，再次调试也没有第一次那么费心，省时省力。不断重用代码的过程中把存在的bug不断的修复，也因为不断的去重用，这个模板变得起越来越独立，适用的情况越来越广范，最后在安全方面达到铜墙铁壁，在开发方面达到随心所欲，在维护方面达到从容面对。

敏捷开发的确是利害，但如何练就这种深奥的武功呢？就我自身的情况靠人传授武功是不可能了，因为公司就我一个做开发的，苦思幂想之后，决定从开源的优秀框架入手，把它一行一行代码看懂，然后再为我所用。因为是一个人开发，前台和后台都得包办，哪从那一面做起呢？之前有过一二个月的开发经验，觉得前台的JS很费时，而且老觉得在做重复的事情，比如发ajax请求，接收结果之后操作节点（有时候遇到不兼容的情况，如select和table在IE下不支持使用innerHTML，style在IE不会自动转化为字符串，要用cssText代替，一旦这些情况遇上，真得是无比打击程序员的积极性，因为你要为此花时间去找替代方案，去调试），还有节点轮换，弹出层，表单验证等一系列烦琐工作。所以我就坚决从前台的JS做起。为了练就怎么把JS的重用性提高，我选择向Jquery取经。花了几个月看了一大半，略有所得。我其中之一的JS模块“无限深度操作节点”（文采不好，名字不妥别见怪）出来了。有了它，我在操作节点方面变得容易，代码变得精简，而且不用写额外的代码去兼容浏览器，谈笑中，功能就完成了。

首先我谈谈是什么让操作节点给我们带来烦恼：

编写ajax程序时，动态增删改页面元素几乎是不可避免的，使用属性innerHTML就是我们经常利用的途径，但在IE中table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML属性是只读的，也就是我们不能使用innerHTML更新这些节点。（这里没有提到select，其实select也是不会成功的，估计是IE的bug）。例子如下：（下面的$id代表document.getElementById）

//执行代码:
$id('jkit').innerHTML = '';
//IE下并没有报任何错误，但select一个option节点都没有了。如果你对table使用innerHTML，IE会报unknown runtime error

对于这种情况比较常用的兼容方法是外加一个外层元素，例子如下：

//执行代码:
$id('jkit').innerHTML = '';
//这样IE也成功改变select，但这种做法有个缺点，如果你对select注册过事件，这些事件会全部丢失，你要外加代码来重新注册事件。

在指定的节点前后新增节点，这就涉及于节点定位，节点创建以及给节点属性设置。使用innerHTML通常只用于覆盖DOM元素的所有节点，如果只想改变元素的某个子节点，或者只想在某个子节点前后增加节点，仍然使用innerHTML就适得其反，实现起来很吃力了，而且使用了innerHTML之后，对子节点注册过的事件肯定全部丢失掉。不使用innerHTML，那只好使用原生的DOM方法了，但这种代替方案也不好使，看下面例子：

//现在我想在jkit之前多加一个option，用原生的DOM方法实现:
var newNode = document.createElement('option'),//新建一个节点
selector = document.getElementById('jkit3'),
/* 也可以用selector.options，但getElementsByTagName更通用。
那用childNodes怎么?最好也不要，对于空白节点，IE和FF的处理方式不一样，
就这例子，在FF中，select的firstChild是空白文本节点，
因为select和第一个option之间有换行以及空白字符，
FF会为其创建节点，而IE会忽略 */
options = document.getElementsByTagName('option');
newNode.setAttribute('value','new');
//newNode.setAttribute('text','NewNode');text不支持这样设置
//newNode.text = 'NewNode';ie不支持这种方式
newNode.innerHTML = 'NewNode';
selector.insertBefore(newNode,options[1]);//在kit之前插入

위 코드를 실행한 후 select에는 하나 이상의 옵션이 있습니다:

root = document.getElementById('category'),

childs = ['tr', 'td th', 'select ul', 'li option'],

table = $CL.newObj('maNode', [root, childs]);

새 트리의 멤버 메소드 다음 API를 읽을 때 두 가지 점을 염두에 두시기 바랍니다. 먼저 루트 객체와 하위 객체의 모든 메소드는 원본 DOM 객체에 대한 것입니다. new object. 그 본질은 해당 원본 DOM 개체를 삭제하는 것입니다. 두 번째로 개체의 추가, 삭제 또는 수정이 호출될 때마다 해당 분기가 재구성됩니다.

루트 객체 고유 방법

function map(index1,index2,,,indexN){}
이 메서드는 하위 노드를 찾는 데 사용됩니다. table.map(1,1,0)은 다음의 두 번째 행을 찾습니다. 두 셀 중 첫 번째 개체는 선택에 해당하는 개체입니다. 지도에 매개변수가 하나만 있고 매개변수가 DOM 기본 객체인 경우 이 메서드는 해당하는 새 객체를 반환합니다.
함수 인덱스(DOMElement){}
이 메서드는 네이티브 DOMElement 객체인 table.index(document.getElementById('lior'))에 해당하는 인덱스를 반환한 다음 [1, 2 ,0,0], 결과는 배열 형식입니다.

하위 개체에 고유한 메서드

function add(index, html){}
이 메서드는 형제 노드를 추가하는 데 사용됩니다. Index는 이 메서드를 호출하는 객체의 위치에 대한 변위입니다. 노드에 삽입하려면 html은 W3c 표준
table.map(2).add(-1,'을 준수하는 모든 html 문자열일 수 있습니다. < /td>'), 세 번째 줄 앞에 새 줄을 추가합니다(동시에 여러 줄을 삽입할 수 있음)
table.map(2) .add(-2, ''), 새 줄 추가 세 번째 줄의 이전 줄 앞
table.map(0).add(2,'< ;/td>table.map(1).add(0,'< /td>'), 인덱스 0은 현재 행 앞에 새 행을 추가하고 현재 행을 삭제하는 것을 의미합니다.
table.map(1).add( '< tr>'), 첫 번째 매개변수 생략, 이는 특별한 사용법입니다. , 어떤 객체를 사용하든 마지막 행
table.map(1,1).add(1,'New cell
function del(index){}
이 메서드는 형제 노드를 삭제하는 데 사용되며, index는 이 메서드를 호출하는 객체의 위치에 대한 변위입니다.
table.map( 1) .del(), 인덱스를 생략하면 여기서 두 번째 행을 삭제하는 것은 table.map(1).del(0)
table.map(0).del(2)과 동일합니다. 현재 호출을 기준으로 개체 뒤의 두 번째 줄은 세 번째 줄
table.map(2).del(-2)을 삭제하고, 여기서는 현재 호출 개체 앞의 두 번째 줄을 삭제합니다. , 여기서 첫 번째 줄
table .map(0,1).del([0,-1,1])을 삭제합니다. index가 배열인 경우 지정된 인덱스의 형제 노드가 삭제됩니다. 이번에는 어떤 개체가 호출되는지는 중요하지 않습니다. 음수 인덱스는 마지막 계산부터 시작한다는 의미이고, -1은 마지막 개체를 의미하며 여기서 첫 번째, 두 번째 및 마지막 번째
table.map(0,1)을 삭제합니다. del(0,-1), 두 개의 매개변수가 있으면 삭제를 의미합니다. 이때, 어떤 객체가 호출되든 상관없습니다. -1은 끝부터 계산한다는 의미입니다. 여기서는 첫 번째부터 마지막 요소까지 삭제하세요. 큰 매개변수를 첫 번째 매개변수로 사용할 수 있습니다. 크기 순서에는 제한이 없습니다.
function getParent(){}호출 객체 table.map(0,1).getParent().tagName의 상위 객체에 해당하는 기본 DOM 객체 노드를 가져옵니다.
function getHigher(){}호출 객체의 상위 객체 가져오기 table.map(0,1).getHigher.getNode().tagName은 tr입니다.
루트 개체와 하위 개체가 소유한 메서드

function getNode(){}호출 객체에 해당하는 기본 DOM 객체 노드를 가져옵니다. table.getNode().tagName은 table, table.map(0,1).getNode입니다. () 일
함수 sizeOf(){}호출 객체의 하위 객체 수를 가져옵니다. table.sizeOf()는 3입니다. 이는 3개의 행이 있음을 의미합니다.
함수 pos(){}모든 형제 노드에서 호출 객체의 위치를 가져옵니다. table.map(1).pos()는 1입니다.
function html(html){}호출 객체에 해당하는 기본 DOM 객체의 innerHTML을 가져옵니다. 매개변수가 전달된 경우 해당 innerHTML 특성에 값을 할당합니다. 읽기 전용 개체 innerHTML에 값을 할당합니다.)
함수 속성(html){}
호출 객체에 해당하는 네이티브 DOM 객체의 innerHTML을 가져옵니다. 전달된 매개변수가 있는 경우 해당 속성에 값을 할당합니다(아직 구현되지 않음).
function before(index,html){}
호출 객체의 지정된 하위 객체 앞에 노드를 추가합니다. index는 상대 변위입니다.
table.before(1 ,' '), 행 추가
table.map (1 ,2,0).before(-1,'
새 li 노드
'), 마지막 li 앞에 새 li를 추가합니다(인덱스는 음수는 끝부터 세는 것을 의미하고, -1은 마지막을 의미합니다.)
table.before('< /td> ;'), 첫 번째 매개변수를 생략한다는 것은 첫 번째 하위 개체 앞에 새 노드를 추가하는 것을 의미합니다.
함수 추가(index,html){}
호출 객체의 지정된 하위 객체 뒤에 노드를 추가합니다. 인덱스는 상대 변위입니다.
table.append(1,' '), 두 번째 줄
테이블 뒤에 줄을 추가합니다. .map(1 ,2,0).append(-1,'
새 li 노드
'), 마지막 li(색인) 뒤에 새 li를 추가합니다. 음수는 끝부터 세는 것을 의미하고, -1은 마지막을 의미합니다)
table.append(' ;'), 첫 번째 매개변수를 생략한다는 것은 첫 번째 하위 개체 뒤에 새 노드를 추가하는 것을 의미합니다.
함수 교체(index,html){}
호출 객체의 지정된 하위 객체에 해당하는 기본 DOM 노드를 html로 생성된 노드로 교체합니다.
table.replace( 2,'새 줄'), 추가 두 번째 줄을 대체합니다
table.replace(-1,'New line< /td> ;'), 새 줄을 추가하고 마지막 줄을 그 줄로 바꿉니다(음수 인덱스는 끝부터 계산한다는 의미, -1은 마지막 줄을 의미함)
함수 clean(index){}
이 메서드는 형제 노드를 삭제하는 데 사용됩니다. Index는 이 메서드를 호출하는 개체의 위치를 기준으로 한 변위입니다.
table.clean (), 인덱스를 생략한다는 것은 첫 번째 하위 개체를 삭제한다는 의미입니다. 여기서 첫 번째 행을 삭제하는 것은 table.map(1).del(0)
table.clean(2)과 동일합니다. 🎜>table.clean (-2), 여기서는 마지막 행
table.map(0).clean([0,-1,1]) 삭제를 의미합니다. 인덱스가 배열인 경우 하위 개체는 지정된 인덱스가 삭제되고 인덱스가 음수이면 끝부터 계산한다는 의미, -1은 마지막 인덱스를 의미합니다. 여기서 첫 번째, 두 번째 및 마지막 번째를 삭제합니다
table.map(0).clean(0,- 1) 매개변수가 2개인 경우 지정된 범위의 하위 개체를 삭제한다는 뜻입니다. 음수 인덱스는 끝부터 계산한다는 뜻이고, -1은 마지막 요소부터 삭제한다는 의미입니다. 첫 번째 매개변수로 사용됩니다. 크기 순서에는 제한이 없습니다.

새 트리의 루트 노드가 테이블이고 그 하위 노드가 tbody/thead/tfoot인 경우 이 노드를 더 자주 작동하지 않고 tr을 직접 작동하므로 약간 허용했습니다. 이 노드를 처리합니다. 물론, tbody를 조작하려면 다음과 같은 매개변수를 전달할 수 있습니다. ['tbody thead tfoot', 'tr', 'td'] 그 중 하나만 가져오려면 ['tbody' , 'tr', 'td']; tr을 직접 가져오면 ['tr','td']가 가능합니다. 이 경우 tbody/thead/tfoot

결론: 돌이켜보면 이러한 플러그인을 사용하면 앞서 언급한 노드 운영의 세 가지 주요 문제가 쉽게 해결될 것입니다. 게다가, 이 플러그인은 어떠한 로직과도 관련이 없으며, 2차 처리도 필요하지 않습니다. 필요에 따라 선택하지 않아도 확장이 가능합니다. 언젠가 개발 과정이 퍼즐처럼 될 것이라고 상상해보세요. 개발된 플러그인이 합쳐지면 얼마나 멋진 프로젝트가 나올까요? 결과가 기대만큼 좋지 않을 수도 있지만, 예상할 수는 있는 일이다. 이런 방향으로 가면, 사건은 점점 단순해질 수밖에 없다. 글이 너무 길기 때문에 소스코드 부분에 대해서는 다음에 글을 올릴 때 자세히 설명하도록 하겠습니다.

성명：

이전 기사：JQuery의 로드 function_jquery를 사용하여 다른 페이지의 콘텐츠를 동적으로 로드하기 위한 구현 코드다음 기사：JQuery의 로드 function_jquery를 사용하여 다른 페이지의 콘텐츠를 동적으로 로드하기 위한 구현 코드

노드 작업을 위한 API, HTML DOM 노드 작업을 위한 기본 API를 전복_javascript 기술

首先我谈谈是什么让操作节点给我们带来烦恼：

관련 기사