练习创建函数和传递参数 |尝试在 querySelectors 上使用参数时获取 null

Question

我是 Javascript 的新手，我正在练习函数和参数，当我尝试使用函数对 DOM 进行一些更改时，我“碰壁了”，方法是将参数传入那些可以完成这项工作的功能。在浏览器的控制台中，我得到：

Uncaught TypeError: document.querySelector(...) is null
classAdder script.js:25
<anonymous> script.js:48

第25行是classAdder函数内部的那一行，第48行是classAdder的调用

提前致谢。

// Function decleration
function createArticle(h1, p) {
  let art = document.createElement("article");
  let data = document.createTextNode("<h1>" + [h1] + "</h1><p>" + [p] + "</p>");
  art.appendChild(data);
  return art;
}

// Arrow Function
const byTagElementAdder = (whereadd, whatadd) => {
  document.getElementsByTagName(CSS.escape(whereadd)).innerHTML = whatadd;
};

// Function expression
const classAdder = function (element, classname) {
  document
    .querySelector(CSS.escape(element))
    .setAttribute("class", CSS.escape(classname));
};

// Arrow function
const styleAdder = (element, style) => {
  document
    .querySelector(CSS.escape(element))
    .setAttribute("style", CSS.escape(style));
};

//
// Using the functions
// Creating new article
const firstArt = createArticle(
  "The H title",
  "The paragraph lorem ipsum bla bla"
);

// adding article in body
byTagElementAdder("body", firstArt);

// adding some style and class
classAdder(firstArt, "art");
styleAdder(firstArt, "width: 100%; margin: 0 auto; padding: 2rem 0 ;");

Answer 1

为了让您的代码正常工作，我做了一些更改：

您收到此错误的原因 Uncaught TypeError: document.querySelector(...) is null 是因为您使用的 CSS.escape 需要一个字符串，但您传递的是 dom 元素。所以你可以直接在元素上使用 .setAttribute。
您的 byTagElementAdder 函数试图将 innerHTML 插入数组。我已将其切换为引用数组的第一个元素并使用 appendChild 函数代替
在您的 createArticle 函数中，您使用的是 createTextNode，但我认为您会希望对 h1 和 p1 标记使用 creatElement正如您对 article 元素所做的那样。

这是一个代码片段

function createArticle(h1, p) {
  let art = document.createElement("article");
    // this creates text as opposed to the h1 and p elements, which is what I think yu want  
  let data = document.createTextNode("<h1>" + [h1] + "</h1><p>" + [p] + "</p>");
  art.appendChild(data);
  return art;
}

// Arrow Function
const byTagElementAdder = (whereadd, whatadd) => {
    // getElementsByTagName returns an array so you want to choose a value within it
  document.getElementsByTagName(CSS.escape(whereadd))[0].appendChild(whatadd)
};

// Function expression
const classAdder = function (element, classname) {
    //once you pass in an element you don't need to use document.querySelector, you already have the document   
  element
    .setAttribute("class", CSS.escape(classname));
};

// Arrow function
const styleAdder = (element, style) => {
  //once you pass in an element you don't need to use document.querySelector, you already have the document 
  element
    .setAttribute("style", CSS.escape(style));
};

//
// Using the functions
// Creating new article
const firstArt = createArticle(
  "The H title",
  "The paragraph lorem ipsum bla bla"
);

// adding article in body
byTagElementAdder("body", firstArt);

// adding some style and class
classAdder(firstArt, "art");
styleAdder(firstArt, "width: 100%; margin: 0 auto; padding: 2rem 0 ;");

<body>

</body>

练习创建函数和传递参数 |尝试在 querySelectors 上使用参数时获取 null

Practising on creating functions and passing params | Getting null when trying to use params on querySelectors

javascript

parameters

function

queryselector