HTML DOM Nodes

HTML DOM Nodes 介绍

HTML DOM将HTML文档视为节点树。
HTML DOM Nodes分为：文档节点、元素节点、属性节点、文本节点、注释节点。

HTML DOM Nodes 层级

节点树的层级关系分为：父parent、子child、同胞sibling。


 

 HTML DOM Nodes 方法

HTML DOM 方法是可以在节点上执行的动作。
元素节点：

查询元素节点

    

  1. var element = document.getElementById(‘id‘);
    2. 



    

  1. var elements = documnet.getElementsByName(‘name‘);
    2. 



    

  1. var elements = document.getElementsByTagName(‘tagName‘);
    2.

新增元素节点

    

  1. element.insertBefore();
    2. 



    

  1. element.appentChild();
    2.

删除元素节点

    

  1. createElement();
    2. 



    

  1. element.removeChild();
    2.

修改元素节点

    

  1. element.replaceChild();
    2.

属性节点：

查询属性节点

    

  1. element.getAttribute();
    2.

新增属性节点

    

  1. element.createAttribute();
    2.

修改属性节点

    

  1. element.setAttribute();
    2.

文本节点：

新增文本节点

    

  1. element.createTextNode();
    2.

HTML DOM Nodes 属性

HTML DOM属性 是指我们可以在节点上设置修改的值。
节点通用属性：

nodeName（节点的名称）

nodeValue（节点的值）

nodeType（节点的类型）

节点层级属性：

父节点

    

  1. node.parentNode;
    2.

子节点

    

  1. node.childNodes;
    2.

兄弟节点

    

  1. node.nextSibling;
    2.

null

时间： 2024-12-19 13:12:30

HTML DOM Nodes的相关文章

DOM Nodes

An idea of DOM Another document Walking DOM using Developer Tools Whitespace nodes Other node types DOCTYPE Comments Summary The DOM represents a document as a tree. The tree is made up of parent-child relationships, a parent can have one or many chi

[HTML5] DOM Nodes Explained

import './assets/css/style.css'; const app = document.getElementById('app'); app.innerHTML = '<h1>JavaScript DOM</h1>'; // <html> console.log(document.documentElement); console.dir(document.documentElement); // <head> console.dir(d

DOJO DOM 功能

In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browser way. Using basic DOM knowledge and only a few Dojo functions, you will be able to efficiently create, read, update and delete elements in the page o

Vue源码探究-虚拟DOM的渲染

Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue 实例后的一般执行流程,首先来看看实例初始化时对渲染模块的初始处理.这也是开始 mount 路径的前一步.初始包括两部分,一是向 Vue 类原型对象上挂载渲染相关的方法,而是初始化渲染相关的属性. 渲染的初始化 下面代码位于vue/src/core/instance/render.js 相关属性初始

JavaScript 的 API 设计原则

前言 本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时的原则,总共包含了七个大块.系卤煮自己总结的一些经验教训.同时也参考了一些文章,地址会在后面贴出来.很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正. 一.接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 操作某个元素的css属性,下面是原生的方法: document.querySelectorAll('#id').style.color = 'red'; 封装之后 function a(

读jQuery源码之三

源码177-527行:jQuery.extend方法 jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; // Handle a deep copy situation if ( typeof targ

jQuery源码

/*! * jQuery JavaScript Library v1.8.3 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2012 jQuery Foundation and other contributors * Released under the MIT license * http://jquery.org/license * * Date: Tue Nov 13 20

JQuery data API实现代码分析

JQuery data 接口是什么? .data() Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. 根据jquery官网介绍,data给存储DOM关联的数据, 设置数据是对$选取的所有JQuery对象, 获取数据是对$选取的所有对象的

jquery 2.1.0 源码

/*! * jQuery JavaScript Library v2.1.0 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2